INFO SEPUTAR NGEBLOG

Jumat, 25 Februari 2011

Kumpulan Widget Menarik (adiWidget)

Berikut ini adalah kumpilan widget menarik buata sobat kita adiWidget.Saya kebetulan jalan-jalan ke webnya beliau dan kepikiran untuk memberikannya kepada sobat blogger.
Jika sobat blogger ingin menampilkannya pada blog sobat, silahkan tapi misalnya kalau mau bilang terima kasih, sama mas Adi aja, jangan sama saya. (gk enak soalnya).
Oke langsung saja sobat blogger pilih- pilih widgetnya.

Berikut kodenya Untuk diletakkan di dalam Sidebar

Letakkan kode berikut di atas < /body>, jika anda menempatkan widgetnya di sebelah kiri Bawah

Letakkan kode di atas < /body>, jika anda menempatkan Widgetnya di sebelah Kanan Bawah

Kamis, 24 Februari 2011

Situs Download Tema atau Template Blog Blogspot Gratis

berikut adalah daftar situs tempat download template / tema blog gratis favorite sayazenplatefree templates bloggerzoomtemplateblogtemplate4ubtemplates--Thumbnail Screenshots by Thumbshots--

Cara mengubah Tema atau Template Blog Blogspot

login >> Dashboard >> klik link Design blog yang akan di editPage ElementsHalaman ini adalah halaman yang pertama anda temui pada fasilitas designDi halaman ini anda bisa menambahkan gadget/widget serta mengatur gadget/widget sesuai selera andaFasilitas-fasilitas : Edit : untuk mengedit atau merubah isi gadget Add a gadget : untuk menambah gadget. contoh gadget utama : popular post :

Alamat Situs tempat edit foto online

Mohon maaf bila postingan ini agak keluar dari topik utama blog ini, tapi karena ada beberapa teman yang bertanya tentang alamat situs tempat edit foto atau memberi bingkai pada foto secara online, maka dalam postingan ini saya akan menginformasikan beberapa alamat situsnya, semoga bermanfaat ...Dengan fasilitas yang ada di situs yang saya informasikan di bawah, anda bisa mempercantik foto anda

Cara Memasang Widget Wibiya pada Blog

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibiya ini sangat canggih. Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? Untuk demonya silakan lihat blog Saya DISINI, ada tools yang berisi pencarian, who's online, facebook, live chat dll.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

Buka website wibiya.com dan klik tombol "Get It Now"

Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Menambah Widget "Follow me on Twitter" pada Blog

Sobat blogger yang terkasih. kali ini saya akan memberikan tips untuk menampilkan widget Follow me Twitter di blog. Gimana caranya????.sabar dulu,,,

neh ada di bawah cara membuatnya:

Langkah-langkah berikut untuk memasang Ikon Follow me on twitter pada blog:

1.Login ke blogger dengan ID saudara

2.Klik Tata Letak.

3.Klik Elemen Halaman.

4.Klik Tambah Gadget.

5.Kemudian Pilih HTML/Javascript.
Silakan pilih gambar yang kamu inginkan, copy paste Kode HTML Berikut :

Keterangan : Ganti link http://twitter.com/YourLink dengan link akun twitter kamu,
contohnya http://twitter.com/sigotom

By: Twitter Buttons

By TwitterButtons.com

By: Twitter Buttons

By TwitterButtons.com

By: Twitter Buttons

By TwitterButtons.com

Maverick Money Makers

By TwitterButtons.com

Maverick Money Makers

By TwitterButtons.com

Anda Juga Bisa Memsang Follow me on Twitter Ini Berjalan di Samping Blog Kamu:

Caranya adalah sebagai Berikut:
1. Login ke Blogger.

2. Klik Rancangan

3. Klik Edit HTML.

4. Kemudian Cari kode]]></b:skin>

5. Kemudian Copy dan paste Kode berikut Di atas kode yang tadi.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

6. Selanjutnya Cari kode </body> kemudian copy dan paste kode berikut di atasnya.

<div id="trik_pojok">
<style type="text/css"><br />#followmeontwiter {<br />position:fixed;_position:absolute;<span style="color:blue;">top</span>:100px; left:0px;<br />clip:inherit;<br />_top:expression(document.documentElement.scrollTop+<br />document.documentElement.clientHeight-this.clientHeight);<br />_left:expression(document.documentElement.scrollLeft+<br />document.documentElement.clientWidth - offsetWidth); }<br /></style>
<div id="followmeontwiter">
<a href="http://twitter.com/%3Cspan%20style=">IDtwitter" target="_blank title="Follow Me on Twitter">
<img src="http://lh3.ggpht.com/_noownWFsWHg/Sy9XXErXDaI/AAAAAAAAAOE/xIWnIMtdqzE/followmeontwitterbyblackpinktemplates.jpg" border="0" /></a>
</div>
</div>

Silahkan anda ganti tulisan IDtwitter dengan ID Twitter anda.

7. jika sudah selesai, silahakn Simpan Template.

Jquery MultiLevel Menu Navigasi

Begitu banyak model dari menu navigasi ini. Sampai-sampai kita bingung untuk membuatnya dalam blog. tetapi itu semua tergantung sobat blogger. Yang manapun anda coba, pasti itulah yang terbaik untuk anda.
Masih dalam membuat menu navigasi,saya sebelumnya sudah pernah memberikan tips yang berhubungan dalam menu navigasi. Untuk membacanya, silahkan BACA DISINI.
Sobat blogger, untuk tampilan dari menu ini lebih canggih dari yang sebelumnya. Dimana menu ini mempunyai cabang hingga tak terhingga, menurut keinginan kita.
Oke jika sobat ingin membuatnya dalam blog, silahkan ikuti tips ini sampai selesai, jangan tanggung-tanggung.
Berikut langkah-langkah dari membuat menu multilevel ini.

1. Login ke blogger dengan akun anda
2. Pilih Rancangan
3. pilih Edit HTML
4. Cari kode <head> dan letakkan kode berikutdi bawah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

5. Lalu letakkan kode css berikut di atas kode ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Kode tersebut adalah tampilan dari menu navigasi anda. Silahkan anda edit sesuai kebutuhan anda.

6. Nah sekarang kita menuju kebawah untuk menemukan kode seperti ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>

</div>

Pastikan kode yang kita temukan seperti kode yang berwarna Biru. Karena kode yang berwarna hitam berbeda-beda setiap template.

7. Lalu letakkan kode berikut di bawah kode yang tadi

8. Kalau sudah, silahkan Simpan Template.

Pekerjaan belum selesai, sekarang kita menuju Elemen Laman.
Terlihat pada "Elemen Laman" muncul tempat gadget baru, lalu klik aja "Tambah Gadget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.
Jika sudah selesai, silahkan anda SAVE.

semoga bermanfaat

Menambah Elemen di Bawah Header

Menambah elemen di bawah header akan membuat blog kita menjadi "multi element". Yang akan dibahas kali ini adalah untuk menambah elemen di samping header blog. Masih ada yang belum tau Header?. Header adalah bagian atas blog kita, diman header adalah merupakan bagian tempat judul blog berada.
Saya mencoba memberikan tips ini karena saya ingin memberikan elemen di samping header saya, tetapi karena bertepatan rencana itu halaman Edit HTML saya lagi bermasalah, maka rencana itu saya tunda dulu. Dan saya akan terlebih dahulu memberikan tipsnya. Untuk mengetahui elemen itu seperti apa, mari kita lihat gambar di bawah ini:

Contoh Element pada Blogspot

Sekarang kita sudah mengenal apa yang namanya elemen pada blogspot. Tibalah waktunya untuk menambahkan elemen tersebut di bawah header blog kita. Untuk gambar header bisa kita lihat pada gambar di bawah ini:

Perhatikan gambar di atas

Melihat gambar di atas, saya rasa semua sudah jelas untuk tujuan dari tips ini. Jika masih ada yang masih bingung, saya mohon lebih dipelajari lagi.
Untuk membuat elemen di samping Header, silahkan ikuti langkh-langkah berikut ini.

1. Login ke blogger dengan akum kamu
2. Pilih Rancangan pada halaman Dasbor nlog kamu
3. Kemudian pilij Edit HTML
4. cari kode ]]></b:skin> (tekan Ctrl+F atau tekan F3), lalu letakkan kode script ini di atas ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

5. Cari kode yang mirip seperti kode berikut

6. Kopi kode berikut, dan letakkan persis di bawah kode yang tadi

7. Klik tombol SIMPAN TEMPLATE. Dan tunggu beberapa saat.
8. Setelah template tersimpan, silahkan pilih Elemen Laman
9.Nah, tampilan elemen anda akan seperti gambar di bawah ini

Hasilnya akan seperti gambar di atas.

Nah..sekarang blog anda sudah mempunyai elemen yang langsung berada persis di bawah header blog anda. Sekarang terserah anda akan mengisi apa di sana.
10. Sekarang tipsnya sudah selesai.
Semoga bermanfaat.

INFO SEPUTAR NGEBLOG

Pages

Arsip Blog

Jumat, 25 Februari 2011

Kumpulan Widget Menarik (adiWidget)

Kamis, 24 Februari 2011

Situs Download Tema atau Template Blog Blogspot Gratis

Cara mengubah Tema atau Template Blog Blogspot

Alamat Situs tempat edit foto online

Cara Memasang Widget Wibiya pada Blog

Menambah Widget "Follow me on Twitter" pada Blog

Jquery MultiLevel Menu Navigasi

Menambah Elemen di Bawah Header

Labels

Blog Archive