Cara Membuat Menu Tab View Slide

Sekian Lama Ka Neo Jarang Nge Posting,Akhirnya bisa posting juga.

HEEEI SOBAT!
Udah Tau Kan Menu TaB View Slide,,Ituloh Yang Ada Di Atas Postingan Blog Ka Neo,

Tempat Tutorial Blog

Berisi Tentang Seluruh Informasi,widget,panduan Dan Segala macam Tutorial Blog lainnya

Ka Neo Mo Cerita Dulu Nih Untuk Temen-Temen KlikShare,Waktu Itu (lupa hehehehe.....).Sobat Ku Bertanya Tentang Tutorialnya.Dan sekarang ka Neo Buatin.
Oh ya Sobat Ka Neo Yang Di Maksud Adalah Ka Uka
Selain Sobat Faceboook Juga ,Dia Sobat Blogger ku Juga.Kita Lanjut aja se

1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ini ]]> letekkan kode berikut diatas ]]>
   

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}

-----------------------------------------------
2. Download kode selanjutnya, KLIK DI SINI
3. Copi kode tersebut dan paste sebelum kode
4. Simpan template
5. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>


Moga-Moga Tutorialnya Bermanfaat Dan Bisa Memperindah Blog/Website Sobat.

Mau Bikin Website Gratis Untuk Blog Mu Klik Di sini

read more...

Cara Pasang Auto Read More Pada Blogger

Pengen Di Blog Mu Pasang auto Read More Ayo Ikuti Caranya




Oke Ikuti Petunjuk Ka Neo

Untuk Blogger Pemula Seperti Saya,,Lebih Baik Memakai Auto Read More.

Oke Kita Langsung Ke Caranya


1.Pergi ke halaman Edit HTML (pada tata Letak)
2.Centang pada Expand Template Widget

3.Setelah itu cari (ctrl + f) kode

4.Letakkan kode javascipt dibawah tepat diatas kode

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

5.cari (ctrl + f) kode

ganti kode diatas dengan kode dibawah

<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' target='_blank'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Nahh,,Sekarang Langsung Simpan Templatenya Jadi Dehh

Tambahan :

pada kode JavaScript yang atas

var thumbnail_mode = "float"; ( letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))
summary_noimg = 250; (Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Tinggi thumbnail dalam piksel)
img_thumb_width = 120; (Tinggi thumbnail dalam piksel)

pada kode yang dibawah

target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.


READ MORE -

READ MORE - dapat diganti sesukanya misalnya, Baca Selengkapnya di atau Selanjutnya ->
Jika tidak ingin menampilkan judul halaman di sebelah Read More hapus kode

Mau Bikin Website Gratis Untuk Blog Mu Klik Di sini

read more...

Cara Memposting Artikel

Buat anda yang mengalami kesulitan atau masih bingung tentang tata cara memposting suatu artikel kedalam blog, maka pada postingan ini akan di bahas tentang bagaimana cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.



2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).



3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.



4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.



5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Selamat Berjuang

Mau Bikin Website Gratis Untuk Blog Mu Klik Di sini

read more...

Cara Mengganti Template Bagi Pemula

Sesuai janji Ka Neo ,,,Ka Neo Akan Menampilkan cara menganti template Bagi Pemula

~Download Template Sesuai Kenginan,atau bisa mendownload di bawah ini



Klik Gambar Di Atas

Cara Mengganti template di blogger:

1. Login ke blogger.com,
2. Setelah masuk ke dashboard, pilih blog yang ingin kamu ganti templatenya.
3. Klik pada link Layout.
4. Setelah halaman Template terbuka, pilih sub menu Edit HTML
5. Sekarang upload fil .xml yang udah kamu download, Klik tombol Browse dan cari dimana file .xml kamu simpan, kemudian klik tombol Upload
Yang masih mamakai Classic Template, mau pakai yang new blogger template
Login ke blogger.com, setelah masuk ke dashboard, pilih blog yang ingin kamu ganti templatenya. Klik pada link Template.
Setelah halaman Template terbuka, pilih sub menu Customize Design
Klik Tombol Upgrade Your Template dan pilih salah satu template yang ada, kemudian klik tombol Save Template
Jadi code nya seperti make classic template, cukup upload dan templatemu langsung berubah.

Tpis;
selalu backup/ download template yang dipakai sebelum mengganti dengan template baru.

Mau Bikin Website Gratis Untuk Blog Mu Klik Di sini

read more...