Plugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan mudah menerapkan ini ke dalam blog juga sangat mudah untuk menggunakannya.
Anda dapat menyorot beberapa kata dan menambahkan tooltip kepada mereka, bila ada pengguna melayang pada kata sebuah tooltip mulus akan muncul tepat di atas dari kata disorot dengan tooltip jQuery description.
Tooltip ini dirancang oleh Nettuts + dan saya telah membagikan ulang ini pada Helper Blogger.Now mari kita lihat bagaimana untuk menambahkannya dan menggunakannya,
Seperti yang saya sebutkan di atas instalasi dan penggunaan tooltip sangat mudah, Anda hanya perlu meletakkan beberapa kode dalam template Anda, cukup ikuti langkah-langkah sederhana di bawah ini.
Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu tab, mengganti warna menu tab baik pada saat aktif ataupun ketika hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog anda.
Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :
Seperti biasa ....
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
5. Copy kode javascript di bawah ini dan taruh tepat sebelum kode </head> :
<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) { t.headingText = headingElement.innerHTML; if (this.titleElementsStripHTML) { t.headingText.replace(/<br>/gi," "); t.headingText = t.headingText.replace(/<[^>]+>/g,""); } break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script>
6. Kemudian Copy juga kode CSS di bawah ini dan taruh tepat setelah kode javascript diatas, atau sebelum kode </head> :
7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan anda cari pada bagian sidebar, pada blog ini kodenya seperti berikut :
Catatan :
Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"
8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) :
Catatan :
Teks warna biru adalah Judul tab menu.
Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.
9. SIMPAN TEMPLATE.
Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat :
Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 6) yang perlu di ganti :
Nah.... selesai, mudah - mudahan penjelasan diatas membantu.
Selamat siang gan,ane asik-asik ngasih Tips aja nih,kali ini saya share cara membuat Forum login,,Kapan Download Software nya ya???ahhaha...Sabarr ya gan.
Untuk membuat forum login banyak langkah yang bisa kita pakai. Kita bisa membuat forum tersebut menggunakan layanan gratis. Tapi bila anda ingin membuat forum login yang digunakan untuk masuk ke blogger dengan akun google, dibawah ini adalah kode yang biasa anda gunakan. Andabisa memasang forum loginnya di side bar, atau dimana saja sesuai selera anda. Bila anda berminat, silahkan anda copy kode berikut :
Selamat malam agan-agan dan sista-sista,ane baru pulang jalan sama Cewek langsung mosting sebuah Tips gimana cara
Bila beberapa hari yang lalu saya sudah share windows 8 pro, pada kesempatan kali ini saya akan mencoba berbagi pengalaman bagaimana cara menginstall windows 8 via usb flashdisk. Simak step by stepnya berikut ini,, Untuk menginstall windows 8 via usb flashdisk saya tidak menggunakan aplikasi pihak ketiga, hanya menggunakan aplikasi bawaan windows yang serba bisa, yakni command prompt. Berikut langkah demi langkahnya :
Cara Install Windows 8 via USB Flashdisk Dengan Mudah :
Pastikan USB Flashdik anda memiliki kapasitas yang cukup untuk menampung file-file windows 8. Saya menggunakan flashdisk 8 Gb.
Colok flashdisk ke laptop/komputer.
Buka command promnt, caranya tekan tombol Win+R. Lalu ketik CMD, enter.
4. Masuk ke dalam aplikasi command prompt kan?? Ketik diskpart, enter. 5 .Ketik list disk, maka akan muncul media penyimpanan di komputer anda, pastikan anda tahu betul yg mana flashdisk anda. Untuk mngetahuinya, cukup liat kapasitas size nya aja. Posisi flashdisk saya ada di disk 2, maka ketik select disk 2.
Ketik clean, enter. Lalu ketik create partition primary, enter.
Ketik select partition 1, enter. Ketik active, enter lagi.
Ketik format fs=fat32, enter.
Ketik assign, enter.
Terakhir, ketik exit, dan enter.
Sekarang kita sudah selesai tahap awal menyiapkan flashdisk yang akan kita gunakan, selanjutnya ialah tahap copy dan paste file-file windows 8 nya. Copy semua files windows 8 yang ada di dalam DVD kemudian paste di flashdisk anda. Selesai, kini flashdisk anda sudah siap digunakan untuk Install Windows 8.
Hallo sahabat Blogger,,saya mau share nih bagaimana cara memasang head Linenews di blog kita,bagi yang sudah tau mungkin hanya menyimak aja,bagi yang blom tau tentang ini yuk mari sama-sama belajar dengan apricyber..heheh. Soalnya baru belajar juga.
"Banyak Cara yang di lakukan para blogger untuk meningkatkan page view, mulai dari membuat daftar isi sitemap, memasang artikel terkait, memasang arsip, dan lain - lain. Kali ini saya akan share tentang Headline News. Headline News bisa sobat liat pada beberapa website yang meletakkannya di bagian atas ( header ), meskipun tak jarang juga di pakai di bawah ( footer).
Bagi sobat yang tertarik Memasang Headline News di Blog sobat, ikuti langkah - langkahnya..
1. Log in ke akun blog sobat 2. Klik Rancangan
3. Edit Html 4. Letakkan kode berikut di atas kode ]]></b:skin>
HEAD LINENEWS APRICYBER(Tuliskan kata-kata anda disini)
</MARQUEE></b></font> </div>
6. Klik SAVE
Tmbh : Tulisan yang berwarna biru adalah kode yang bisa sobat ganti. yang meliputi : #000000 adalah warna huruf. untuk melihat kode warna Left adalah gerakkan dari headline news, sesuaikan dengan keinginan sobat ( Kanan : Right ) - ( Kiri : Left ) #80ff00 adalah warna background. 100% adalah ukuran headline news.
