Waduh lama neh melupakan blog..sampe2 g keurus...waktu buka blog eehhh dapet 2 kejutan..pertama kejutan yang nyenening,,kedua kejutan yang nyedihin...jadi gini ceritanya kejutan yang pertama, ketika gw buka blog eh ada yg aneh di page rank. Ketika gw amat2 in eh ternyata dpt PR2,,,wah wah,,,seneng bgt neh hati,,.tpi waktu bila mata bergeser ke kanan dan berhenti pada Alexa...yah kegembiraan yang tadinya membeludak tiba tiba surut deh..ternyata alexa naik drastis bgt,.gmana neh sob???ada yang bisa ngasih saran ga???Mohon pencerahanya..
Wah lama neh sob ga buat postingan. Jadi inget neh ada proyek buat kumpulan tutorial bloger. Langsung aja kali ini saya akan ngasih tau caranya buat navigasi horizontal multi level. Biasanya pada setiap templete udah ada menu seperti ini, tetapi kadang ada yang kurang lengkap karena tidak multi level. Eiiitss bukan MLM lho.. Bagi sobat yang udah mahir mungkin postingan kali ini bisa buat koleksi aja.
Langsunga aja ke TKP..seperti biasanya sobat Login ke bloger dan sebagainya langsung masuk ke Edit HTML. Jangan lupa download templete dulu, buat jaga jaga.
Langsung saja langkahnya sebagai berikut :
Cari kode </b:skin>
Copy paste kode dibawah ini sebelum kode </b:skin>
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}
.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: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
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: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*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;
}
Cari code </head>
Copy paste code dibawah ini sebelum code </head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
Pa kabar sobat
semuanya?? Dah lama neh ga OL, maklum banyak kesibukan di dunia nyata..Kangen
lagi neh ma bloging..eh buat sobat semuanya yang browsernya pake Mozilla
Firefox, ada sedikit tips neh. Biasanya kita lebih terbiasa gunakan mouse untuk
manfaatin menu menu yang ada di mozilla. Tips ini agak berbeda karena kita
hanya menggunakan key board untuk mengoperasikan semuanya. Teapi bagi yang tidak terbiasa kadang malah menyusahkan, karena harus menghafal. Namun bagi yang terbiasa kana sangat membantu karena bisa mempersingkat kerja kita.Langsunga aja deh ne
key yang bisa digunakan di Mozilla.
Keyboard Shortcuts
CTRL + A Select all text on a webpage
CTRL + B Open the Bookmarks sidebar
CTRL + C Copy the selected text to the Windows clipboard
CTRL + D Bookmark the current webpage
CTRL + F Find text within the current webpage
CTRL + G Find more text within the same webpage
CTRL + H Opens the webpage History sidebar
CTRL + I Open the Bookmarks sidebar
CTRL + J Opens the Download Dialogue Box
CTRL + K Places the cursor in the Web Search box ready to
type your search
CTRL + L Places the cursor into the URL box ready to type a
website address
CTRL + M Opens your mail program (if you have one) to create
a new email message
CTRL + N Opens a new Firefox window
CTRL + O Open a local file
CTRL + P Print the current webpage
CTRL + R Reloads the current webpage
CTRL + S Save the current webpage on your PC
CTRL + T Opens a new Firefox Tab
CTRL + U View the page source of the current webpage
CTRL + V Paste the contents of the Windows clipboard
CTRL + W Closes the current Firefox Tab or Window (if more
than one tab is open)
CTRL + X Cut the selected text
CTRL + Z Undo the last action
F1 Opens Firefox help
F3 Find more text within the same webpage
F5 Reload the current webpage
F6 Toggles the cursor between the address/URL input box and
the current webpage
F7 Toggles Caret Browsing on and off. Used to be able to
select text on a webpage with the keyboard
Sobat semua pasti dah tahu banget yang namanya read more. Biasanya blog / website menggunakan read more untuk menyingkat posting artikel agar terlihat rapi. Banyak sekali versi read more. Yang akan saya share kali ini adalah read more yang secara otomatis bisa mengatur tampilan. Yang dimaksud di sini yaitu kita tidak perlu bersusah payah memotong artikel yang akan di tampilkan di depan. Tetapi sudah otomatis terpotong berdasarkan jumlah karakter yang dapat kita setting sendiri. Ga seperti read more yang lain yang harus memotong secara manual, tetapi program ini dah bekerja otomatis. Ada lagi fasilitas yang lain yaitu mampu menampilkan image pertama dalam
postingan dan mem-fload image tersebut di awal paragraf awal, meskipun
gambar yang kita letakan berada di tengah atau akhir postingan. Mungkin lebih tepatnya image thumbnail. Tidak hanya itu masih banyak fasilitas lainya.
Ga usah muter muter langsung aja ke TKP.
Oya bagi sobat semua yang sudah terlanjur menggunakan read more versi lama / manual sebaiknya templete di kembalikan seperti semula kayak waktu masih perawan gtu..hehehe..
Bingung caranya? Ya udah gini aja. masuk ke EDIT HTML, Cari kode seperti ini.
var thumbnail_mode
= "float"; (kita dapat memutuskan apakah letak thumbnail berada di
(float) kiri atau jika tidak silahkan ganti dengan (no-float) summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail) summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail) img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel) img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Dah beberapa hari neh ga posting. Bingung mau postingin yang mana, akhirnya nemu ide...tapiii....mungkin postingan kali ini ga bermutu lagi. Tapi mungkin bisa sedikit bermanfaat buat para bloger. Kali ini saya akan membagi cara bagaimana agar blog kita bisa memberikan laporan jumlah total postingan dan komentar yang pernah masuk. Yah itung itung sebagai pelangkap aja.
Langsung aja ke TKP. Seperti biasanya login ke blogspot dan sebagainya. Terus langsung aja klik tambah gadget trus pilih HTML/Java script..Kayak biasanya gitu lah..Terus copy paste aja script dibawah ini.
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src="http://[blog km sob]/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://[blog km sob]/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
Ada satu lagi, jangan lupa ganti [blog km sob] dengan alamat blog sobat, sebab kalau sobat sengaja ataupun ga sengaja ga merubah, saya jamin programnya ga bakalan berjalan. Percaya aja deh..