Seker gong cara buat modifikasi motor racing dan berbagi info menarik Facebook

Tampilkan postingan dengan label net. Tampilkan semua postingan

Cara Mengecilkan Rank Alexa

Cara mengecilkan rank alexa jika kita analisa tidaklah sesulit seperti yang kita bayangkan. Namun bagi sebagian blogger terutama yang baru mengenal rank alexa begitu frustsi dengan rank alexa pada blognya yang begitu tinggi, hingga mencapai puluhan juta. Perlu kita ketahui rank alexa berbanding terbalik dengan rank google, perbedaan ini dilihat dari nominal rank pada masing ranking. Jika di rank alexa, blog yang memiliki alexa rank yang kecil itu semakin baik, namun rank google atau lebih sering kita dengar google pagerank, semakin besar semakin baik. Namun untuk mendapatkan pagerank dari google ini juga sulit, berbeda dengan rank alexa, begitu kita membuat blog dan mendaftarkan blog kita ke alexa rank, maka blog kita sudah memiliki alexa rank. Bagi Anda yang ingin mendapatkan pagerank dari google, saya pernah memposting artikelnya di cara mendapatkan pagerank dari google.

Bagi Anda yang baru memulai blogging dan belum mengenal alexa rank, mungkin timbul pertanyaan seperti dibawah ini

Apa itu alexa rank ?

Alexa adalah perusahaan Amazon.com yang menempati peringkat situs web di Internet menurut sistem mereka sendiri. Cara kerjanya sangat sederhana, Alexa mengakumulasi data dari seluruh Internet melalui Alexa toolbar mereka, yang terpasang di jutaan komputer di dunia. Jadi dengan mereka dapat memahami perilaku pengguna peringkat website di berbagai metrik.

Apakah rank alexa akurat ?

Ini adalah akurat, sesuai dengan standar Alexa.com tetapi tidak dengan Standar global. Hanya karena tidak setiap komputer di planet ini memiliki Alexa toolbar di dalamnya. Jadi data yang dikumpulkan oleh Alexa adalah sangat minim tetapi pada saat yang sama sangat efektif karena hal ini terutama dipasang oleh Blogger, Webmaster dan penggemar internet.

Bagaimana cara mengecilkan rank alexa ?

Nah, pertanyaan inilah yang menjadi topik utama pada postingan ini. Ada beberapa tips yang akan saya sampaikan kepada sahabat super-bee berkenaan dengan mengecilkan rank alexa. Tips yang akan saya sampaikan merupakan hasil dari analisa saya dan apa yang sudah saya lakukan dalam memperkecil rank alexa pada blog Super-Bee ini yang dulunya memiliki rank alexa puluhan juta. Mau tau caranya?

1. Postinglah artikel dalam blog Anda secara rutin dan teratur, minimal 3-4 artikel per-minggunya. Buat artikel yang baik dan diminati banyak orang (baca: tips menulis artikel yang baik)

2. Instal Alexa Toolbar ke dalam komputer atau laptop Anda, dan gunakan setiap anda browsing, jika Anda menggunakan warnet untuk internetan, instal alexa toolbar disetiap warnet yang anda singgahi, dan setting home page pada browser kemudian masukkan link blog Anda.

3. Daftarkan web atau blog Anda ke alexa.com atau langsung saja klik linkhttp://www.alexa.com/siteowners

4. Pada halaman yang sama ada pilihan untuk mengedit daftar situs Anda, lakukan itu!

5. Gunakan salah satu widget dari alexa, masuk ke link ini http://www.alexa.com/siteowners/widgets

6. Dapatkan lebih banyak pengunjung di blog Anda (baca: cara meningkatkan jumlah pengunjung blog) terutama dari komunitas Blogging karena ada kesempatan baik bahwa mereka memiliki Alexa toolbar yang sudah terpasang. Ada komunitas blogger yang saya anjurkan yaitu http://bloggers.com/

7. Pertukaran link dengan situs lain yang relevan dengan blog yang memiliki peringkat yang baik Alexa.atau berkomentar pada blog dofollow dengan syarat tidak melakukan tindakan spam.

8. Jangan gunakan bots atau metode otomatis lainnya karena Anda bisa kehilangan peringkat dengan mudah jika Alexa mengetahui tindakan Anda tersebut!

Itulah beberapa tips dan cara memperkecil rank alexa yang dapat saya sampaikan kepada sahabat super-bee. Semoga bermanfaat dan dapat membantu mengecilkan rank alexa blog Anda. Sampai jumpa pada tutorial, cara membuat blog, serta tips dan trik blogging berikutnya. Pastikan bahwa Anda tetap mengunjungi blog super-bee ini agar mendapatkan informasi baru seputar blogging dan informasi lainnya.

Cara Mendaftarkan Blog Di Mesin pencari seperti google

mesin pencari google dan yahoo .. yaaa itulah search engine yang paling banyak di gunakan di dunia di bandingkan dengan mesin pencari yang lainnya seperti msn dan lain-lain sebagainya .
untuk memperbanyak trafik blog atau website biasanya menggunakan jasa search engine untuk mempertinggi trafik blog atau website. terkadang para blogger-blogger pemula sering kali mengabaikan untuk mendaftarkan blog atau website mereka ke mesin pencari . mereka pikir jika mereka mepostingkan artikel, kemudian artikel yang mereka postingkan akan secara otomatis masuk ke pencarian google ataupun mesin-mesin pencari lainnya. tapi kenyataannya adalah tidak, ternyata untuk membuat postingan artikel masuk ke mesin pencari kalian harus mendaftarkannya terlebih dahulu ke mesin pencari tersebut. adapun cara-cara mendaftarkan blog ke mesin pencari seperti google dan lainnya sebagainya akan aldi beri tahu cara-cara nya di bawah ini .

langkah - langkah untuk mendaftarkan blog atau website ke google

pertama buka google.com atau klik disini ( untuk google.com )
atau kalian juga bisa mendaftarkan blog di google.co.id atau klik disini
lalu isi link artikel blog yang kalian ingin masukan .. dan isi dekripsi artikel blog yang kalian masukan
( ini untuk google.co.id ) sementara untuk google.com tinggal kalian isi verifikasi yang tertera di situ
.
kemudian klik add url .
untuk perbedaan antar google.com dan google.co.id aldi rasa sama saja sii .
selesai

Setelah kalian melakukan pendaftaran ke Google, maka tidak serta merta blog kalian akan terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog kalian bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog kalian pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog kalian, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin kalian tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog kalian sudah bisa terindeks di google. Ingin tahu caranya? simak saja postingan berikutnya ya, mungkin satu dua hari ke depan artikelnya selesai saya buat.

langkah - langkah untuk mendaftarkan blog atau website ke yahoo

langkah pertama silahkan kalian kunjungihttps://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, kalian harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo.
Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya,kalian tinggal login dengan username serta password kalian. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL kalian,
kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, kalian bisa memasukannya.
Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog kalian, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut : http://www.zengbogel.blogspot.com/atom.xml
selesai

Jika kalian juga ingin mendaftarkan blog kalian ke berbagai mesin pencari lainnya . silakan saja kalian kunjungi
http://www.freewebsubmission.com/link.html? atau klik pada gambar di bawah ini .

Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog

Jika Anda telah menambahkan widget pencarian atau search box ke blog Anda, Anda mungkin bertanya-tanya bagaimana hal itu bisa terlihat sedikit lebih bergaya!

Sebetulnya dalam membuat model widget pencarian tidak sulit sama sekali. Anda dapat menyesuaikan tombol menggunakan CSS atau ganti dengan gambar sebagai gantinya. Pilihan lain kustomisasi adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian dan menghapus pencarian tombol sama sekali.

Dalam posting ini, kita akan melihat beberapa opsi dan metode untuk menyesuaikan widget pencarian, sehingga Anda dapat memilih metode yang terbaik bagi Anda dan gaya kotak pencarian agar sesuai dengan desain keseluruhan blog Anda sendiri.

Widget Search adalah contoh yang sangat baik dari apa yang bisa dimasukkan dalam header blog, dan dalam posting ini kita akan belajar bagaimana bentuk pencarian dapat ditata sesuai dengan tema Anda.

Widget Cari adalah jenis bentuk, dibangun dari kotak teks (area dimana Anda mengetik istilah pencarian), tombol kirim, dan beberapa elemen tersembunyi yang mengirim informasi ke server tentang pencarian yang sedang dilakukan.

Jika Anda menggunakan Blogger widget pencarian sederhana, kode untuk widget pencarian Anda akan terlihat seperti ini:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/></form>

Unsur-unsur yang bisa kita lihat dalam warna merah. The "search-box" elemen itu adalah kotak yang berisi teks pencarian, sedangkan "search-btn" adalah tombol kunci untuk menyampaikan permintaan pencarian ke server.
Secara default, widget pencarian sederhana ini akan muncul seperti ini dalam template Anda:

Tetapi menggunakan beberapa teknik sederhana, kita bisa membuat ini terlihat jauh lebih cantik!

1 .Menggunakan CSS

Kustomisasi yang paling mudah dapat dicapai hanya menggunakan "inline CSS": ini berarti bahwa kotak pencarian dan tombol dapat ditata dalam kode yang digunakan untuk kotak pencarian.

Sebagai contoh, katakanlah kita ingin kotak pencarian untuk memiliki latar belakang biru pucat dan perbatasan biru tua. Untuk mencapai hal ini, kita hanya menambahkan beberapa deklarasi gaya ke elemen "pencarian-kotak", seperti ini:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Dengan menambahkan gaya deklarasi ini, kita dapat membuat suatu bentuk pencarian yang terlihat seperti ini:

Kita juga dapat menambahkan gaya pada tombol pencarian dengan cara yang sama. Kali ini, latar belakang biru tua dengan pinggiran merah, sementara teks berwarna putih dan tebal:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

Perhatikan bahwa dalam contoh ini, saya menggunakan "outset" daripada "solid" untuk properti perbatasan; ini memastikan tombol terlihat mengangkat bukannya datar, dan membantu pembaca memahami bahwa itu adalah sebuah tombol yang dapat diklik.
Berikut adalah bentuk yang dihasilkan:

Anda dapat melakukan percobaan dengan berbagai warna dan gaya untuk formulir pencarian Anda sendiri untuk membuat sebuah desain yang unik.

2. Teks Yang Terlihat

Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca Anda (misalnya:! Cari di Blog Ini).
Hal ini dicapai dengan menambahkan "nilai" ke kotak pencarian, seperti ini:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari di Blog Ini"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Ini akan tampil seperti ini:

Untuk mengubah teks pada tombol pencarian, kita hanya perlu mengubah pada value-nya saja:

<input id="search-btn" value="Search" type="submit"/>

Jika Anda lebih memilih tombol untuk mengatakan "Go!", Anda hanya bisa mengganti value dari "Search" dengan "Go!" sebagai gantinya:

<input id="search-btn" value="Go!" type="submit"/>

3. Menggunakan Gambar

Menggunakan gambar bukan tombol tidak begitu rumit. Untuk itu, kita hanya perlu mengubah jenis masukan dari "Submit " untuk Image dan menetapkan URL untuk foto tersebut.

Pertama-tama, Anda perlu untuk mencari gambar yang ingin Anda gunakan, dan upload gambar tersebut ke account hosting eksternal.

Dianjurkan untuk menggunakan gambar kecil atau ikon untuk ini (16x16px atau sedikit lebih besar akan menjadi ukuran yang sempurna untuk bentuk pencarian). Ada banyak ikon pencarian gratis yang tersedia dari Iconlet, atau Anda bisa men-download paket ikon dan memilih gambar yang cocok sebagai gantinya.

Untuk contoh ini, saya akan gunakan gambar ikon yang di upload dari Iconlet:

Untuk menggunakan gambar ikon tersebut dijadikan sebagai tombol untuk form pencarian anda, ini adalah kode yang bisa anda gunakan:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari di Blog Ini"/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQPyHnSYxVO0tmcuO8ExBrnDkJriIsukvjLJMILaCzsJAbAx5vOl7HgaCXyhrreBhQkg-51Wh6mMEKaaR5_gAhVZayS6Uqmf9PWISZ81bEubWU3D1ifwStTVNhvpQGmUgqeVZf7UVx0E/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

Perhatikan bahwa saya telah mengubah jenis input dalam bentuk ini dari "submit" untuk "gambar", dan telah menambahkan URL dari gambar saya sesudahnya. Deklarasi gaya meluruskan citra terhadap kotak pencarian, menambahkan beberapa ruang ke kiri, dan memastikan ini tidak mengapung di atas kotak pencarian.

Gambar tersebut akan terlihat seperti dalam bentuk pencarian ini:

Bila Anda ingin menggunakan foto Anda sendiri sebagai tombol kirim, pastikan referensi URL yang benar dari gambar Anda.

Anda juga mungkin perlu menyesuaikan sedikit margin untuk gambar dari ukuran yang berbeda dengan yang digunakan dalam contoh ini.

Semoga bermanfaat...

Cara Mudah Memasang Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blogspot

Cara memasang Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blogspot ternyata sangat mudah. Sebelum memasang Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blog, sebaiknya non aktifkan fitur share button bawaan blogger agar tombol share tidak tampil dobel.

Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blog berfungsi untuk memudahkan visitor dalam membagikan URL artikel kita ke situs jejaring sosial populer seperti facebook dan twitter. Dengan membagikan atau me-like artikel kita di blog, maka membuka peluang artikel kita akan dibaca banyak orang karena telah dipromosikan oleh orang yang me-like atau share artikel kita di facebook atau twitter.

Berikut tutorial cara mudah pasang Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blogspot:

Login ke blogger, masuk ke tab design/rancangan
Tambahkan gadget HTML/Javascript dimana saja
Copy paste kode/script berikut:

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
<script type='text/javascript'>
document.doAT = function(cl)
{
        var myclass = new RegExp('hentry');
        var myTitleContainer = new RegExp('post-title');
        var myPostContent = new RegExp('post-footer');
        var elem = this.getElementsByTagName('div');
        for (var i = 0; i < elem.length; i++)
        {
            var classes = elem[i].className;
            if (myclass.test(classes))
            {
                var container = elem[i];
                for (var b = 0; b < container.childNodes.length; b++)
                {
                    var item = container.childNodes[b].className;
                    if (myTitleContainer.test(item))
                    {
                        var link = container.childNodes[b].getElementsByTagName('a');
                        if (typeof(link[0]) != 'undefined')
                        {
                            var url = link[0].href;
                            var title = link[0].innerHTML;
                        }
                        else
                        {
                            var url = document.url;
                            var title =  container.childNodes[b].innerHTML;
                        }
                        if (typeof(url) == 'undefined'|| url == 'undefined' ){
                            url = window.location.href;
                        }
                    var singleq = new RegExp("'", 'g');
                    var doubleq = new RegExp('"', 'g');
                    title = title.replace(singleq, ''', 'gi');
                    title = title.replace(doubleq, '"', 'gi');

                    }
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
                var n = document.createElement('div');
                var at = "<div class='addthis_toolbox addthis_default_style ' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_facebook_like' fb:like:layout='button_count'></a> <a class='addthis_button_tweet'></a> <a class='addthis_button_google_plusone' g:plusone:size='medium'></a> <aclass='addthis_counter addthis_pill_style'></a> </div> ";
                n.innerHTML = at;
                container.insertBefore(n , footer);
            }
        }
    return true;
};

document.doAT('hentry');
</script>

Save
Hasilnya akan seperti ini dibawah setiap postingan:

Untuk membuat Tombol Like Facebook, Twitter Tweet, Google+ & Share dengan gaya lainnya, silahkan menuju penyedia layanan gratis ini di http://www.addthis.com

Read more: http://kangasepsule.blogspot.com/2011/12/cara-mudah-memasang-tombol-like.html#ixzz1yVBELWOS

Membuat Like Facebook, Twitter, Google+1 di Postingan Blog

Membuat, Memasang dan Menambahkan Like Facebook, Tweet, Google+1 di Postingan Blog.

Share button / tombol berbagi seperti facebook like, tweet dan Google+1 merupakan salah satu aspek penunjang dalam meningkatkan traffic kunjungan ke blog kita. Apalagi blogger pemula seperti Saya yang masih Nol Besar pemahamannya tentang SEO, mungkin hanya mimpi untuk menjadi nomor 1 di pencarian google. Maka dari itu kita bisa maksimalkan traffic kunjungan blog kita lewat social bookmarking seperti facebook dan twitter.

Langsung saja ya gak usah basa basi lagi dah, hehehe....

Masuk ke akun blogger Anda/ dasbor
Klik Rancangan/Design > Edit HTML> centang Expand Template Widget. Jangan lupa untuk memback up template sobat dengan cara mendownloadnya.
Masukkan dulu kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

kode ini adalah kode javascript untuk memunculkan tombol Google+1, jika kode tersebut sudah ada, maka tidak perlu dimasukkan lagi.

4. Kemudian Copy kode di bawah ini ;

<b:if cond='data:blog.pageType == "item"'>
<table border='0'><tbody><tr>
<td><a class='twitter-share-button' data-count='horizontal' data-via='belajarblogspot' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=85&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:22px;'/></td>
<td>
<script src='http://www.lintas.me/assets/scripts/widget_v2.js?uid=4f49908afb8252a83a003d79' type='text/javascript'/>
<script type='text/javascript'>
lintasme.init('right'); // options : left, top, bottom, right
</script>
</td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
</b:if>

Ganti kode twitter belajarblogspot dengan nama akun twitter sobat. Sobat juga bisa menghapus kode berwarna biru, jika mau. Widget tersebut adalah kode javascript untuk web directory lintas.me

5. Masukkan kode di atas pada kode-kode ini:

jika ingin memasang share button di bawah postingan blog cari kode berikut, dan masukkan kode tadi, tepat dibawahnya kode ini.

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
</div>

Jika ingin memasang share button diatas postingan / di bawah judul postingan, masukkan tepat di bawahnya kode berikut,

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

Kemudian klik pratinjau terlebih dahulu, jika tidak error berarti share button sudah terpasang di blog. Klik Simpan Template. Share button ini akan ditampilkan di halaman posting bukan di menu utama / homepage. Oleh karena coba buka salah satu postingan blog sobat untuk melihatnya apakah sudah bekerja dengan baik.

Oke, Bagaimana... sudah terpasang? Jika belum bisa, Julak siap membantu. Selamat Berblogging mania, hehehe. Salam Blogger. Jangan lupa di share, hehehe...

Cara Menambahkan Tabview Section Pada Sidebar Blog

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuatblog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widgetdalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman Dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
Cari kode ]]></b:skin> (gunakan Control F atau F3).
Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar)

/*-- Tabview Section -- */
.tabs-widget {
list-style:none;
list-style-type:none;
margin:0;
padding:0;
height:24px;
border-bottom:1px solid #A4A4A4;
}
.tabs-widget li {
list-style:none;
list-style-type:none;
margin:0 0 0 4px;
padding:0;
float:left;
}
.tabs-widget li:first-child {margin:0}
.tabs-widget li a {
background-color:#d4d4d4;
color:#000;
text-shadow:1px 1px 1px #fff;
border-top-left-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-khtml-border-radius-topleft:7px;
-khtml-border-radius-topright:7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
border-right: 2px solid #adadad;
padding:5px 10px;
display:block;
text-decoration:none;
font:bold 11px Arial,Helvetica,Sans-serif;
text-transform:uppercase;
}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {
background-color:#A4A4A4;
color:#000;
text-shadow:1px 1px 1px #fff;
border-top-left-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-khtml-border-radius-topleft:7px;
-khtml-border-radius-topright:7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
border-right: 2px solid #adadad;
text-decoration:none;
}
.tabs-widget-content {margin-top:5px; background:#F4F4F4}
.tabviewsection {margin:0 0 2px 0}
Setelah itu letakkan sumber scriptberikut di bawah]]></b:skin>.

<script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>
<script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>
Catatan:
- Bagi yang menggunakan frame work dari mootools, letakkan scripttersebut di bawah script mootools.
- Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.
Kemudian cari kode untuk widget sidebar, seperti berikut:

<b:section class='sidebar' id='sidebar1' preferred='yes'>
Setelah ketemu, kopi dan tempelkanscript berikut di atasnya:

<div class='tabviewsection'>

<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-enes_sc-01-id").hide();
$("ul.tabs-widget-widget-enes_sc-01-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-enes_sc-01-id:first").show();

$("ul.tabs-widget-widget-enes_sc-01-id li a").click(function() {
$("ul.tabs-widget-widget-enes_sc-01-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-enes_sc-01-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>

<ul class='tabs-widget tabs-widget-widget-enes_sc-01-id'>
<li><a href='#widget-enes_sc-01-id1'>Tabmenu 1</a></li>
<li><a href='#widget-enes_sc-01-id2'>Tabmenu 2</a></li>
<li><a href='#widget-enes_sc-01-id3'>Tabmenu 3</a></li>
<li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id1'>
<b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
<b:widget id='HTML73' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id2'>
<b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
<b:widget id='HTML74' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id3'>
<b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
<b:widget id='HTML75' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
<b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
<b:widget id='HTML76' locked='false' title='' type='HTML'/>
</b:section>
</div>

</div>
<div style='clear:both;'/>
Catatan:
- Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4sesuai dengan judul menu yang diinginkan.
- Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
  
  <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
  
  dan kode:
  
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
  <b:widget id='HTML76' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
- Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.
Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:

Langkah Kedua

Setelah disimpan, klik Elemen Laman
Perhatikan perubahan yang terjadi, seperti gambar berikut:
Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
Catatan:
- Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satuwidget, termasuk yang non-HTML/JavaScript (bawaan blogger).
- Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
  
  <div class='widget-content'>
  
  menjadi:
  <div class='widget-content' style='overflow:auto; height:250px'>
Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...

Catatan Tambahan:
Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst.

Sumber

Ditulis oleh

Kang eNeS

Minggu, 19 Juni 2011. Jam 07:03

Cara Membuat Sidebar Berada Di Kiri Dan Kanan

cara membuat Sidebar Berada Di Sebelah Kiri Dan Kanan.

Baik,Untuk totorial saya kali ini akan menjelas kan bagai mana cara membuat sidebar berada di kiri dan kanan..

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung Heee..

Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini ada baiknya membaca Artikel Sebelum nya terlebih dahulu karena artikel ini merupakan lanjutan dari artikel tersebut, jika sobat langsung membaca artikel ini, saya khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat yang mempraktekan teori yang akan saya tulis sebaiknya bukan pada blog utama, akan tetapi pada blog untuk percobaan. Ini untuk menghindarkan kejadian yang tidak di inginkan, sayang apabila blog yang telah di tata rapih menjadi amburadul akibat percobaan.

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet. Jika pada postingan yang lalu saya menuliskan kode seperti ini :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :

#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombolsimpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :

<div id='sidebarbaru-wrapper'> 
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

<div id='main-wrapper'> 
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !

Tidak sulitkan sobat? semoga mudah untuk di mengerti. Untuk melihat contoh blog yang mempunyai sidebar di samping kiri dan kanan, sobat bisa membuktikannya di sini!

SEKER GONG BUAT MODIFIKASI MOTOR PADA BLOG RACING DAN BERBAGI INFO MENARIK

MANTEN JAWA

Me And Friend

Welcome

Navigasi

Social Stuff

OTOMOTIF

Labels

Percintaan

Tentang Fb

Tutorial blog

Cara Mengecilkan Rank Alexa

Apa itu alexa rank ?

Apakah rank alexa akurat ?

Bagaimana cara mengecilkan rank alexa ?

Cara Mendaftarkan Blog Di Mesin pencari seperti google

Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog

Cara Mudah Memasang Tombol Like Facebook, Twitter Tweet, Google+ & Share di Blogspot

Membuat Like Facebook, Twitter, Google+1 di Postingan Blog

Cara Menambahkan Tabview Section Pada Sidebar Blog

Cara Membuat Sidebar Berada Di Kiri Dan Kanan

DAFTAR

KOMENT

Entri Populer

Blog Archive

Categories

Follower email

Pendidikan	Agama