Blog Mbahyar

Daripada pusing memikirkan kontes SEO, mending juga posting lagi, Bener tidak Masbro! Saya akan bahas kali ini masih tentang SEO dan backlink. Begitu banyak cara dan trik untuk mencari backlink, pastinya setiap blogger memiliki cara yang berbeda dan unik tentunya. Nah kali ini saya akan memberikan perangkat lunak bebas yaitu Auto Backlink Generator Software. Pernah mendengar tentang software ini kan??

Sebelumnya jika seseorang masih tidak mengerti apa itu dan apa manfaat backlink backlink, Anda dapat membaca kembali postigan saya sebelumnya, Anda dapat melihat dalam hal backlink dan manfaat.

Dengan Auto Backlink Generator Software, Anda tidak perlu repot-repot mencari website yang menyediakan backlink otomatis gratis. Anda cukup klik pada perangkat lunak, masukkan nama situs Anda, dan mengirimkannya. Situs Anda akan menghasilkan ratusan situs penyedia tersubmit Auto baclink hanya dengan satu klik.

Seperti kita ketahui, biasanya ada masih menggunakan cara manual, yaitu dengan mengetik nama backlink tujuan, dan menempatkan link ke link blog kita di belakang target.

Contoh:

    http://whois.domaintools.com/ [URL Blog kita]
    http://hosts-file.net/default.asp?s = [URL blog kita]
    http://www.aboutus.org/ [URL blog]

Nah, jika seseorang telah mengetik kerumitan yang jelas dan memakan waktu yang tepat? Perangkat lunak ini berfungsi sama seperti contoh di atas.

Bila dibandingkan dengan manual, menggunakan software ini jelas memperbaiki lah bro, lebih praktis.

Silahkan download software di bawah ini:

Free Download Software Auto Backlink Generator.zip (341.39 KB)
Password: mbahyar.blogspot.com


Cara menggunakan:

1. Klik ikon Backlink Kecepatan 1.1

2. Klik Tambah (lihat gambar di bawah)



3. Masukkan URL Situs Web Anda, misalnya http://www.google.com, lalu pilih OK

4. Klik Submit (menyerahkan proses ini akan memakan waktu sekitar 30 menit, tergantung pada koneksi internet yang Anda gunakan).

5. Jika proses pengajuan berhasil, maka akan terlihat seperti gambar di bawah.



6. Pilih OK .... dan selesai.

Catatan:

Perangkat lunak ini bentuk portabel, jadi teman saya tidak perlu repot menginstalya, setelah didownload, hanya dalam ekstrak, dan menjalankan perangkat lunak. dan lagi versi perangkat lunak lengkap.

nah saya akan membahas peluang lebih lanjut juga kegunaan rss feed  .

Sekian dari saya, semoga bermanfaat. Salam blogger

Compress CSS Kode Untuk Kecepatan Loading Blog, mungkin itulah yang akan saya bahas malam ini, karena pengunjung sering mengeluh dan paling malas ketika mereka harus meminta maaf blog pembebanan berat badan, di mana efek buruknya, jangan berharap para pengunjung akan kembali lagi ke blog kita. yaitu tidak semua jalan, blog saya juga cukup berat, tp karana kebantu oleh tembolok sehingga mending'lah tidak terlalu berat, tapi aku masih perlu untuk kompres lagi. hihihi ...

di mana di jalan, kita membuat kode CSS file.css dan upload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, kita kompres kode CSS untuk aplikasi online. Cara bahwa saya berlatih sebelum kompres CSS dengan CSS Compressor.

Penting!

Sebagai tindakan pencegahan selalu backup dulu template anda, sehingga jika nanti teman saya memiliki masalah, dapat meng-upload template sobat cadangan. Ok ....

Berikut adalah langkah-langkahnya:

•     Seperti biasa, login ke blogger sobat
•     Login Desain / Tata Letak
•     Pilih Edit HTML
•     Klik tombol "Download Full Template" (ini untuk membackup template Anda)
•     Perhatikan langkah-langkah berikut

1. Kompres kode CSS pada umumnya (standar)

Untuk cara pertama adalah cara kita umumnya sering / blogger.

• Untuk melihat / membandingkan hasilnya, pertama, untuk memeriksa silahkan cek di Speed ​​Test
• Kemudian blok dan POTONG semua kode CSS setelah kode <b:skin> <! [CDATA [dengan kode sebelum]]> </ b: skin>
• Jika teman saya kurang jelas dengan penjelasan di atas catatan ini:

<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

• Buka situs CSS kompresor sini
• Mengatur pengaturan sebagai berikut:

Mode kompresi = pilih 'Normal'

Komentar penanganan = pilih 'Jangan strip komentar'

Paste kode CSS yang telah dipotong sebelumnya di kotak kosong

Kemudian klik Compress-It

Selanjutnya copy hasil kompresan tadi dan tempatkan pada kode template anda antara

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

    Terakhir, klik Simpan

Tugas berikutnya adalah untuk membandingkan blog sobat berat badan sebelum dan sesudah dikompres.

2. Kedua cara Compressed kode CSS (saat kakek saya) dan juga memampatkan Kode HTML

Caranya juga tidak jauh dari jalan pertama, hanya yang terakhir ini lebih sengit dari sebelumnya, (bernoda mengatakan demikian) Ckckckk

Karena itu adalah cara yang agak rumit, apalagi melihat kode CSS yang kita kompres, pasti tidak ada koma, titik dan spasi. Tentu menciptakan kebingungan jika kita ingin mengedit kode.

Tapi jika sobat tertarik untuk kompres kode CSS biar lebih maknyus, ikuti langkah-langkah di bawah ini:

Apakah saya melihat kembali bagaimana langkah pertama, yaitu:

• Blokir dan POTONG semua kode CSS setelah kode <b:skin> <! [CDATA [dengan kode sebelum]]> </ b: skin>
• Buka situs CSS kompresor sini
• Settingnganya rubah sebagai berikut:

• Kompresi mode = pilih 'Super Compact'
• Komentar penanganan = pilih 'Sisihkan semua komentar apapun'
• Kemudian tempatkan kode antara hasil kompresannya

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

• kemudian dipotong kembali pada kode antara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

• Kemudian buka halaman berikutnya dan kompres kode di sini HTML Optimizer
• Copy dan paste kode antara hasil sebelumnya kode <body> kompresan dan </ body>
• Terakhir, klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam berlatih, karena kode CSS / HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena tanpa spasi.

Oke, sobat tugas selanjutnya adalah membandingkan hasil dari sebelum dan sesudah dikompres.

Untuk di atas saya telah menerapkan di blog saya. Dan Alhamdulillah tidak ada masalah alias lancar! Dan akhirnya itu mungkin Cara Untuk Mempercepat Halaman Compress CSS Blog yang saya lakukan.

Good luck buddy ... Semoga bermanfaat.

SEO (Search Engine Optimization), Belajar memahami apa itu SEO, dan apa pentingnya SEO untuk Web / Blog.

Definisi "SEO (Search Engine Optimization)" itu sendiri merupakan upaya untuk Optimized atau untuk meningkatkan peringkat website atau blog di mata mesin pencari (search engine).

Fungsi / Tujuannya adalah untuk mendapatkan pengunjung atau visitor ke blog atau website Anda melalui mesin pencari (search engine) seperti Google, Yahoo, MSN dan lain-lain.

Semakin baik rangking blog atau website di mata mesin pencari, semakin banyak pengunjung yang mengunjungi blog / website. Itulah sebabnya kita harus belajar pentingnya SEO. sehingga penenrapan SEO di web / blog sangat diajurkan, bahkan mungkin wajib!

Menurut info yang saya dapat pada www.belajarngeblog.com,

Kegiatan SEO atau Search Engine Optimization terdiri dari dua jenis, yaitu:
 
Kegiatan Optimasi on-page SEO, kegiatan belajar SEO yang kita lakukan langsung pada blog kita sendiri atau situs web. Kegiatan ini melibatkan elemen pada halaman dan rekayasa konten ke blog atau website kita, dan sebagian besar tanpa memerlukan biaya. misalnya, memilih nama domain, membuat konten asli, menambahkan meta tag dan lain-lain. 

Kegiatan Optimasi off-page SEO, sebagai lawan Pada Halaman, kegiatan belajar SEO dilakukan di luar blog ini, misalnya, mengirimkan url blog ke search engine, submit ke direktori web, bergabung dengan forum, mencari backlink dari blog / website dan lain yang serupa.

kesimpulan:

SEO OnPage Optimasi sangat berpengaruh di mata Search Engine Google untuk konten atau isi dari blog kita, terutama bagi blogger yang mencari Page Rank.

Untuk kegiatan sementara off-page SEO atau dapat dikatakan berusaha untuk lebih meningkatkan popularitas blog / website.

Nah untuk optimasi mesin pencari (SEO) di Blogger akan saya bahas dalam posting berikutnya.

Itu mungkin makna, fungsi, dan definisi SEO. mungkin berguna.

Cara Membuat Tab View dengan JQuery Efek Animasi Roll, ditambah sentuhan JQuery didalamnya. Misalnya Anda dapat melihat pada gambar di bawah:



Bagaimana Masbro, keren kan tab tampilan widget? selain tabview juga bisa membuat blog Anda tampak rapi. Yowes, mari kita mulai untuk membuatnya.

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>




6. Setelah itu, cari kode </ head> setelah bertemu dan menempatkan kode javascript tepat di atas jQuery berikut:



8. Simpan tempalate, dan bro masih jauh neh ... pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Kemudian pasang kode di bawah ini:

 <ul class="slick">

<li title="tabsatu" class="slick active">Tab Satu Gan</li>

<li title="tabdua" class="slick active">Tab Dua Gan</li>

<li title="tabtiga" class="slick">Tab Tiga Gan</li>

</ul>



<div id="tabsatu" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Satu

</div>



<div id="tabdua" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Dua

</div>



<div id="tabtiga" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Tiga

</div>




9. Sampai di sini Anda dapat membuat kulit jquery acara tab tampilan widget gulir. dan jangan lupa untuk menyimpan.

Keterangan:

Kode berani mengganti / isi dengan widget sobat inginkan.

dan untuk kode CSS, harap edit dan sesuaikan dengan template Anda. dan jika zoom ingin kasus blog saya, jangan lupa untuk memberikan komentar, saya akan membantu sebisa mungkin.

Dan lagi, jika Anda sudah ditemplate jquery-1.3.2.min.js? sarana untuk file.js 'tidak perlu ditambahkan lagi.

Itu mungkin Cara Membuat Tab View dengan JQuery Efek Animasi Roll, keberuntungan, mungkin berguna.

Kwick Blogger Navigation Menu dengan jQuery, mungkin itulah yang akan saya bahas kali ini. Setelah kemarin saya membahas juga untuk cara membuat Jquery Gulir Tampilkan Sembunyikan Tab View Widget, kita pergi lagi, dan masih sekitar JQuery. Ini juga merupakan reques dari beberapa blogger, yang diminta untuk membuat tutorial sebuah. Ok, masih penasaran jika teman saya bisa melihatnya di blog saya menu navigasi ini, atau dapat melihat gambar / sreenshot bawah.


yang akan membuat blog terlihat lebih keren bro, karena dengan jQuery Sliding Navigation Menu.

Berikut adalah langkah-langkah untuk membuatnya:

1. Login ke blogger sobat

2. Masuk ke desain / Desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

 .kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

6. Kemudian cari kode <head>, dan letakkan tepat di atas kode jQuery berikut:

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Juga tambahkan kode script berikut di bawah ini:



7. Simpan template.

Nah untuk file.js ada ketika menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu lagi dipasang.

8. Selanjutnya masih terisak, pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Untuk cara berikutnya, rada rumit, ketika teman ditemplate halaman widget yang ada ke halaman ditas pos, teman saya hanya menambahkan kode berikut:


9. Simpan / Save. Sipppp, di sini sobat mampu membuat kwick blogger menu navigasi dengan jQuery.

Catatan:

Karena aku bisa membayangkan kwick'nya menu pelajaran-blog.blogspot.com, ada juga tutorial, tapi sedikit berbeda dari cara saya. Untuk Kode CSS silahkan sesuaikan sendiri ke blog Anda.

Nah, di atas adalah cara yang saya terapkan di blog saya dulu. Ketika teman punya masalah, teman  bisa meminta melalui komentar di bawah ini.

Saya bermimpi memiliki sebuah blog adalah dinamis dan ini mungkin adalah impian setiap blogger karena penampilan menarik biasanya pembaca akan melihat perubahan yang terjadi pada setiap halaman apalagi dilengkapi dengan navigasi dan widget yang dapat memungkinkan pengunjung untuk mencari atau memilih artikel yang mereka inginkan, misalnya dengan menambahkan Daftar isi, kotak pencarian, kategori, label, dan lain-lain Posting Terkait, berharap untuk membuat lebih banyak pengunjung berlama-lama.

Untuk membuat halaman blog satu cara yang lebih dinamis untuk menyembunyikan widget, sidebar, dan footer pada halaman tertentu. Misalnya, sidebar dan footer hanya tampil di halaman utama. nah, bagaimana? trik berikut.

Ikuti langkah-langkah di bawah ini

1. Pertama Login ke akun blog Anda.

2. Pilih Layout dan kemudian Edit HTML.

3. Expland Template Widget kotak centang.

Sebagai contoh, teman saya ingin nyembunyiin ada widget di blog Anda, misalnya, baru-baru ini widget post / komentar.

4. Kemudian mencari id dari widget kode gadget post / komentar, kemudian paste garis biru kode pada baris kode widget id dari gadget sebelumnya komentar sebagai berikut:

<b:widget id='Feed1' locked='false' title='Comments' type='Feed'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

5. Jika ya, maka simpan template.

Jadi sekarang sidebar post / komentar hanya akan muncul di halaman depan saja.

Sekali lagi contoh, misalnya teman saya ingin menyembunyikan daftar isi dalam slidbar Widget, yang hanya ingin ditampilkan pada halaman posting berikutnya, maka setelah menemukan baris kode yang id widget keren, maka sispkan garis berwarna biru kode pada baris kode widget widget id dari isi daftar sebelumnya.

<b:widget id='HTML2' locked='false' title='Facebook Profile' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty –>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'> <data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

</b:widget>

Setelah selesai, kemudian simpan template.

Jadi sekarang isi widget hanya akan ditampilkan pada halaman berikutnya, di mana muncul tulisan utuh. Sedangkan pada halaman depan widget ini tidak akan ditampilkan.

Jika Anda ingin menyembunyikan di halaman depan dan halaman berikutnya akan ditampilkan pada elemen halaman, seperti sidebar kanan, maka baris kode yang harus dimasukkan kode adalah sebagai berikut:

<div id='sidebar-wrapper'> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section> </b:if>
</div>

Setelah itu Simpan template.

Jadi jangan khawatir, jika ternyata kemudian pada Elemen Halaman, sidebar yang telah diberi kode tidak akan muncul. Untuk mengedit isi sidebar, hanya menghapus baris kode yang telah dimasukkan sebelumnya bahwa sidebar terlihat lagi.

Yah mungkin ada yang belum tahu bagaimana menemukan widget id slidbar, saya jelasin lagi neh ..

1. Masuk ke halaman edit, klik edit pada widget id sidebar seperti kita mengenalnya.


2. Prhatikan gambar di atas, menulis di sudut kanan atas di blok biru, itulah kode widget id. Itu berarti mengetahui id widget, widget blog.

NB: Untuk memudahkan kode HTML pada kolom, gunakan kolom pencarian dengan mengklik Ctrl + F, kemudian ketik kata atau frase yang ingin Anda cari.

Jadi sekian dari saya, semoga bermanfaat.

Cara Membuat Related Post (Artikel Terkait) di Sidebar Blog, kembali tips blogspot dan trik, setelah beberapa hari yang lalu dan google update pagerank menjalani beberapa pencarian sistem engin'nya, kalai aku akan kembali untuk meninjau beberapa trik di blog yang sempat tertunda. hoho ... Kali ini saya akan membahas adalah bagaimana membuat related post / artikel terkait di sidebar blog. Artikel yang paling relevan / related post itu biasanya di bagian bawah posting. Ini yang sering saya jumpai di beberapa web / blog. Tapi ada juga banyak yang menggunakan metode ini untuk menginstal related post / artikel terkait lainnya di sidebar.


Untuk teman lurus demo bisa melihat blog saya, atau pada gambar di bawah ini:

Artikel Terkait Lainnya

Berikut adalah langkah-langkah untuk membuatnya:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: </ head> (gunakan Ctrl + F pada keyboard Anda sob), setelah bertemu untuk tetap menaruh kode berikut CSS tepat di atas </ head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

6. Kemudian cari lagi kode berikut:



7. Ganti kode diatas dengan kode berikut:

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Catatan:

Perhatikan kode max-results = 10, nomor 10, itu adalah jumlah artikel terkait yang akan muncul di sidebar. Sobat bisa menggantinya sesuai keinginan.

8. Simpan template, dan lanjutkan ke langkah-langkah berikut

9. Selanjutnya, pergi ke Elemen Halaman> Tambah Gadget> HTML / JavaScript> lalu copy dan paste kode di bawah ini ke dalam konten HTML / JavaScript.



10. Simpan dan lihat hasilnya.

Tambahan:

Dan biasanya untuk artikel terkait di sidebar hanya muncul pada halaman berikutnya pos / tidak muncul di halaman depan, dan Anda dapat melihat cara ia berhasil dalam:

Bagaimana Tampilan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu

Tampak rumit dan panjang, tapi itu mungkin Cara Membuat Related Post (Related Post) Di Sidebar Blog. Dan jika sobat ingin menampilkan posting / artikel terkait terkait, seperti memiliki o-om.com, sobat bisa bertanya langsung di sini, dengan komentar.

Semoga bermanfaat.

Cara membuat menu melayang di blog, blogwallking mendapatkan trik yang menurut saya cukup menarik dan keren, tetapi bisa untuk mempercantik blog, menu ini mengambang juga dapat menghemat ruang pada blog. Menariknya lagi untuk kode'nya tanpa menggunakan script.js hanya menggunakan kode CSS. Yah, tentu saja tidak membuat blog berat badan yang tepat? Penasaran?

Anda dapat melihat scrennshot'nya disamping:

Cara membuatnya sangat mudah. Ketika teman saya tertarik, berikut adalah langkah-langkah untuk membuatnya.

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tambah Gadget dan pilih HTML / JavaScript

4. Lalu masukkan kode berikut di dalamnya

<style text-type="CSS">
#floatmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>

<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>

Keterangan:

Warna merah pada kode di atas, itu adalah untuk mengatur posisi menu mengambang.

Jika sobat ingin meletakkannya di bagian kanan atas slide down, ganti kode yang berwarna merah dengan kode berikut:



Jika Anda ingin berada di bagian kiri bawah, dengan slide ke arah atas, ganti dengan kode berikut:



Warna biru, mengambang ke menu title.

Hijau adalah warna yang Anda ingin link url sobat pasang, dan juga untuk mengubah nama menu sebagai judul link url.

Sisanya bisa sobat edit-edit sendiri sesuai keinginan pasangan.

5. Jika demikian, jangan lupa klik Save / Simpan.

Itu mungkin Cara Membuat Menu Spoiler Melayang  Dalam Blog, semoga bermanfaat.

Sumber: full-tricks.blogspot.com

Kembali ke tips dan trik, kali ini akan membahas tentang Mbahyar Jquery Color Picker, yang justru cara membuat widget dengan kode warna JQuery (gaya baru). Sebenarnya setelah saya sudah membuat kode warna widget, sobat bisa melihat posting saya sebelumnya adalah Cara Membuat Kode Warna Dalam Blog Widget. Nah bedanya jika kode warna dengan JQuery Saya rasa ini adalah lebih sederhana dan tidak memakan terlalu banyak ruang, dan pandangan yang lebih ringan, keren dan menarik. Selain itu CSS dan kode JavaScript yang digunakan lebih sederhana. Yang tentunya tidak akan menambah beban loading blog Anda. Penasaran? Untuk menjadi kawan Demo'nya lihat pada gambar di bawah ini:

Kode Warna Demo Dengan Jquery

Langkah-langkah berikut membuat widget dengan kode warna Jquery:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada keyboard Anda sob), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

/* jQuery Color Picker: Farbtastic */
.farbtastic {
position: relative;
}
.farbtastic * {
position: absolute;
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
width: 195px;
height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
top: 47px;
left: 47px;
width: 101px;
height: 101px;
}
.farbtastic .wheel {
background: url(http://i865.photobucket.com/albums/ab218/1rd3/wheel-kode-blogger.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(http://i865.photobucket.com/albums/ab218/1rd3/mask-kode-blogger.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(http://i865.photobucket.com/albums/ab218/1rd3/marker-kode-blogger.png) no-repeat;
}

6. Lalu masukkan kode script berikut di atas </ head>

<script src='http://k-blogger.googlecode.com/files/jquery_color_picker.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/farbtastic.js' type='text/javascript'/>
<link href='farbtastic.css' rel='stylesheet' type='text/css'/>
<script charset='utf-8' type='text/javascript'>
$(document).ready(function() {
$(&#39;#demo&#39;).hide();
$(&#39;#picker&#39;).farbtastic(&#39;#color&#39;);
});

</script>

7. Jauhkan pertama. Dan lebih lanjut untuk menampilkan alat kode warna, sobat bisa menempatkan kode berikut dalam posting blog atau widget.

<div id="demo" style="color: red; font-size: 1.4em;">
jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item">
<label for="color">Color:</label><input id="color" name="color" type="text" value="#123456" /></div>
<div id="picker">
</div>
</form>

8. Simpan dan lihat hasilnya.

Keterangan:

Silakan mengedit CSSnya bagian, untuk menyesuaikan tinggi dan lebar template blog Anda. Kode Widget Dengan Jquery Warna (New Style) dapat dimasukkan ke dalam pos dan teman saya di widget blog. Good luck,