Cara Membuat Navbar Horizonal Multi Level

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*/

</style>

<![endif]-->



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

<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>

Cari code seperti ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>

</b:section>

</div>

Copy paste code dibawah ini tepat di bawah code tersebut di atas.

<div class='jqueryslidemenu' id='myslidemenu'>

<ul>

<li><a href='http:marchsya.blogspot.com'>Home</a></li>

<li><a href='#'>Daftar Isi</a></li>

<li><a href='#'>Tutorial Blog</a>

<ul>

<li><a href='#'>Sub Item 1.1</a></li>

<li><a href='#'>Sub Item 1.2</a></li>

<li><a href='#'>Sub Item 1.3</a></li>

<li><a href='#'>Sub Item 1.4</a></li>

</ul>

</li>

<li><a href='#'>Islam</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>

<li><a href='#'>Sub Item 3.1.1.3</a></li>

<li><a href='#'>Sub Item 3.1.1.4</a></li>

<li><a href='#'>Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a href='#'>Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='http://marchsya.blogspot.com'>Tukar Link</a></li>

</ul>

<br style='clear: left'/>

</div>

Terus di SAVE

Dan coba deh....moga berhasil dan bermanfaat....jika sobat ada yang mau menambahkan silahkan aja..

Baca Lengkap - Cara Membuat Navbar Horizonal Multi Level

Keyboard Shortcuts Untuk Mozzila

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

F11 Switch to Full Screen mode

Moga bermanfaat.

Baca Lengkap - Keyboard Shortcuts Untuk Mozzila

Read More Otomatis ( Auto Read More )

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.

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'&gt;Readmore</a>
</b:if>
<div style='clear: both;'/>

Lalu hapus kode yang berwarna merah. Setelah itu di save.

Masih di halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Jangan lupa di save.

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

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)

Semoga bermanfaat.

Referensi http://en.vietwebguide.com  

Baca Lengkap - Read More Otomatis ( Auto Read More )

Cara Menampilkan Jumlah Total Posting dan Komentar

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..

Terus Save..jadi deh 

Di coba dulu yah. jangan lupa kasih komentar biar reportnya banyak..

Baca Lengkap - Cara Menampilkan Jumlah Total Posting dan Komentar

Cara Upload Foto atau Gambar

Masih dari kelanjutan tutorial blog. Kali ini saya akan memberikan cara-cara memasukan gambar atau foto dalam postingan. Sudah jelas sekali gambar atau foto sangat penting sekali. Selain untuk memperjelas isi artikel yang diposting, gambar atau foto juga bisa untuk mempercantik blog kita. Cara untuk memasukan foto atau gambar sangat gapang sekali. 

Berikut cara caranya.

Seperti biasa login ke blogspot lalu masuk ke menu posting. Halaman yang terbuka sama seperti waktu membuat postingan. Setelah itu kita tinggal klik gambar panorama  

Maka akan terbuka jendela seperti ini :

Lalu tinggal klik browse, trus cari gambar atau foto yang akan di masukan. Tunggu beberapa saat sampai proses upload selesai. Setelah upload selesai klik ok. Maka gambar atau foto sudah masuk dalam form postingan.

Untuk mengedit gambar sebagai berikut. Klik gambar yang akan di edit. lalu akan muncul menu toolbar seperti ini.

Sliahkan  sobat atur ukuran gambar dengan mengklik 

• small ( ukuran gamabar kecil ) 
• Medium ( ukuran gambar sedang ) 
• Large ( ukuran gambar besar ) 
• X-Large ( ukuran gambar lebih besar ) 

Atau kalau sobat pengen menentukan ukuran gambar sendiri tinggal klik 2x pada gambar yang akan di edit lalu atur ukuran sesuai keinginan. Menu selanjutnya yaitu 

• Left ( posisi gambar di sebelah kiri )
• Center ( posisi gambar ditengah ) 
• Right ( posisi gambar di sebelah kanan ).

Bila sobat akan menghapus gambar, klik gambar yang dipilih lalu klik remove.

Sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti langkah-langkah di atas, cuma ada sedikit perbedaan yaitu sobat harus menghapus beberapa kode HTML. Jika foto sobat sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:

1. Setelah upload gambar, klik menu Dasboard


2. Klik menu Edit Profile


3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML yang telah sobat copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir dengan [.jpg] atau [.jpeg]


4. Klik Save Profile, maka foto sobat  sudah terpampang di blognya dan bisa dilihat oleh seluruh dunia

Semoga bermanfaat.

Baca Lengkap - Cara Upload Foto atau Gambar