Membuat Tampilan 2 Kolom di Homepage (Halaman Awal) Blog

Membuat Tampilan 2 Kolom di Homepage (Halaman Awal) Blog - Setelah beberapa waktu lalu saya tidak pernah posting di karenakan sibuk di dunia kerja (magang), kali ini saya akan share sebuah tutorial tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog. Dengan di buat menjadi 2 kolom, maka tampilan homepage (halaman awal) blog anda akan lebih rapi dan tidak terlalu memakan banyak tempat. Selain itu, blog akan terkesan lebih professional dan menarik.

Langsung saja simak tutorial tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog berikut ini dengan baik dan benar!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di bawahnya!

  <style type='text/css'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    #main-wrapper {
width:650;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;
} 
    h2.date-header, .jump-link, .feed-links, .post-footer {
display:none;
}
    #blog-pager {
width:100%; clear:both;
}
    .post {
margin:.0 10px 10px 0;background:none;width:290px;height:340px;float:left; border-bottom: 1px solid #ccc; positon:relative;overflow:hidden;
}
    .post-body {
margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;
}
    .post h3 {
height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;
}
    .post h3 a, .post h3 a:visited, .post h3 strong {
font-weight:bold;color:#102D57;
}
    .post h3 strong, .post h3 a:hover {
color:#000;text-decoration:underline;
}
    </b:if>
  </style>

5. Kemudian klik save/simpan template, selesai...

Sekian postingan pada kesempatan kali ini tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog ini, kurang dan lebihnya mohon di ma'afkan. Semoga bermanfaat bagi anda dan jangan lupa untuk berkunjung lagi di lain waktu. Salam sejahtera by ngeposta...

Membuat Breadcrumb di Blog

Membuat Breadcrumb di Blog - Kehadiran breadcrumb saat ini membuat situs seperti web/blog menjadi lebih bervarian dan memiliki tingkat kegunaan yang cukup tinggi. Breadcrumbs adalah navigasi menu untuk mempermudah pengunjung untuk melacak/mengetahui lokasi suatu artikel/konten yang sedang di bukanya secara pasti sehingga pengunjung dapat dengan mudah untuk kembali/menuju ke halaman awal. Biasanya breadcrumb ini berada di atas judul konten/artikel (tepatya di bagian bawah header).

Menurut Wikipedia, definisi breadcrumb adalah sebagai berikut :
"Breadcrumb biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar bagian judul atau header. Breadcrumb menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumb memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti » atau >), serta beragam grafik."

Untuk contoh tampilan breadcrumb ini bisa anda lihat pada gambar berikut!

Oke, langsung saja kita simak tutorial cara membuat breadcrumb di blog berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode berikut ini :

<b:include data='top' name='status-message'/>

5. Ganti kode tersebut dengan kode di bawah ini :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

6. Setelah itu, cari kode di bawah ini :

<b:includable id='main' var='top'>

7. Lalu ganti kode tersebut dengan yang satu ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'><span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » 
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/> » Unlabelled
</b:if> » <span><data:post.title/></span>
</b:loop>
</span>
</p><b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'><span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'><span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if>
</b:if>
</b:if>
</b:if>
</b:includable><b:includable id='main' var='top'>

8. Kemudian cari kode ]]></b:skin> dan letakkan script code berikut ini tepat di atasnya!

.breadcrumbs {
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 2px solid #ccc;
}

9. Klik save/simpan template, selesai dan lihat hasilnya...

Cukup sekian postingan pada kesempatan kali ini, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Semoga postingan tentang cara membuat breadcrumb di blog ini bermanfaat bagi anda dan salam sejahtera by ngeposta...

Membuat Tool Tips JQuery Sederhana

Membuat Tool Tips JQuery Sederhana - Tool tips JQuery ini adalah suatu hal yang terbilang unik dan bisa membantu, fungsinya adalah untuk memberikan keterangan/informasi pada suatu tulisan atau link (bisa berupa text ataupun gambar). Selain itu, ada juga yang menjadikannya sebagai hiasan untuk menarik pandangan para pengunjung blog/webnya.

Langsung saja, ini dia tutorial untuk membuat tool tips JQuery sederhana. Silahkan bisa anda simak dan ikuti dengan baik tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}

5. Setelah itu, sisipkan kode berikut ini tepat di bawah kode ]]></b:skin>.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='http://vikrymadz.googlecode.com/files/helper-blogger-tooltip01.js'
type='text/javascript'></script>

6. Langkah selanjutnya klik save/simpan template.

Dan untuk cara penggunaan tool tips JQuery sederhana ini cukup sederhana, anda tinggal menaruh kode ini di bagian yang anda kehendaki :

<b data-tooltip="GANTI DENGAN TEKS SESUAI KEINGINAN ANDA">
GANTI DENGAN TULISAN, LINK (TEXT/GAMBAR), DLL.
</b>

Kode tersebut bisa anda gunakan di area posting ataupun di area sidebar blog/web anda. Cukup sekian postingan tentang cara membuat tool tips JQuery sederhana ini, selebihnya saya mohon ma'a atas segala kekurangan yang ada. Semoga bermanfaat bagi anda dan salam sejahtera by ngeposta...

Membuat Page Number Navigation

Membuat Page Number Navigation - Page number navigation memang memiliki peran yang cukup berarti dalam sebuah blog/web. Page number navigation ini bisa memudahkan para pengunjung untuk menuju ke suatu halaman yang di carinya. Karena itulah page number navigation sangat berarti keberadaannya dalam sebuah blog/web. Nanum, ada juga yang memilih untuk tidak memasang page number navigation ini. Itu semua tergantung dari anda dan bagaimana anda menyikapi page number navigation ini.

Nah, dan ini dia cara mudah membuat page number navigation di blog, silahkan simak dengan baik tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCqYYDbxp6Go2whTR40_NXa89ohfJHWQubUlbc_V7wxFUq1z6jQBIXGwYVpyUfncQafiazvQVOQYDAvZQu67TmnqsFRoo5L98X0dgRdbug6D1t6xxiXGYnWAGsD3tmCx2eU2TnieW4JA/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCqYYDbxp6Go2whTR40_NXa89ohfJHWQubUlbc_V7wxFUq1z6jQBIXGwYVpyUfncQafiazvQVOQYDAvZQu67TmnqsFRoo5L98X0dgRdbug6D1t6xxiXGYnWAGsD3tmCx2eU2TnieW4JA/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCqYYDbxp6Go2whTR40_NXa89ohfJHWQubUlbc_V7wxFUq1z6jQBIXGwYVpyUfncQafiazvQVOQYDAvZQu67TmnqsFRoo5L98X0dgRdbug6D1t6xxiXGYnWAGsD3tmCx2eU2TnieW4JA/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCqYYDbxp6Go2whTR40_NXa89ohfJHWQubUlbc_V7wxFUq1z6jQBIXGwYVpyUfncQafiazvQVOQYDAvZQu67TmnqsFRoo5L98X0dgRdbug6D1t6xxiXGYnWAGsD3tmCx2eU2TnieW4JA/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>

<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmpYfKCF6FSdkruSoagrvQvHUETEYp9UEmokWGwKLGf5cC4QG2bQz4Bdz7hnHqmlcnQYHPshLYdyHmXlWU3euIH9rtVH33PPqW5GDg6XxWbDIv-V18WgfvDSnfC_LAeURM7_i9qn4OYQ/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

6. Kemudian klik save/simpan, dan selesai...

Note :
Previewnya bisa anda lihat pada gambar di bawah ini!

Sekian dulu postingan tentang cara membuat page number navigation ini, semoga bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Membuat Efek Auto Zoom Image View

Membuat Efek Auto Zoom Image View - Efek auto zoom image view, maksudnya adalah jika kita mengarahkan cursor (pointer cursor) ke arah gambar maka secara otomatis gambar tersebut akan mengalami zoom (perbesaran ukuran). Hal ini dapat memberikan keunikan dan membuat daya tarik blog anda menjadi lebih bagus. Namun tetap ingat! Pastikan blog anda tidak memasang terlalu banyak widget atau pernak-pernik yang berbobot sedang atau bahkan berat. Karena jika hal itu tidak anda pedulikan dan anda tetap memasangnya secara berlebihan, maka bukan hasil yang bagus yang akan anda dapatkan. Justru hasilnya akan buruk dan berdampak negatif pada kualitas blog anda khususnya pada waktu loading.

Nahh, untuk cara membuat efek auto zoom image view ini anda bisa mengikuti tutorial tentang cara membuat efek auto zoom image view berikut ini dengan baik!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

.post img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}

5. Lalu klik save/simpan template, selesai...

Cukup sekian dulu postingan pada kesempatan kali ini, semoga bisa bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kesalahan dan kekurangan yang ada. Jika anda menyukai postingan tentang cara membuat efek auto zoom image view ini, silahkan bantu share ke social media dan jangan lupa tinggalkan komentar anda. Salam sejahtera by ngeposta...

Membuat Widget Labels atau Category Menjadi Dua Kolom

Membuat Widget Labels atau Category Menjadi Dua Kolom - Untuk menghemat tempat yang ada pada blog/web anda, maka kita benar-benar harus bisa berpikir lebih creative dan responsive dalam menanggapi suatu permasalahan yang ada. Widget labels atau category yang ada di blog anda bisa di minimalis agar tidak terlalu memakan tempat, yaitu dengan cara membuatnya menjadi dua kolom.

Langkah pertama yang harus anda lakukan adalah pasang dulu widget labels atau category di blog anda, silahkan bisa anda ikuti tutorial berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "Labels".

5. Atur widget tersebut menjadi seperti berikut :

6. Klik save/simpan.

Setelah itu, kita beranjak ke langkah selanjutnya yaitu menyisipkan sedikit kode ke bagia HTML template blog untuk membuat widget labels atau category yang sudah di buat agar menjadi dua kolom. Silahkan ikuti langkah-langkah berikut ini!

1. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

#Label1 li {
      float: left; 
      width: 45%;
} 

5. Lalu klik save/siimpan template, slesai dan lihat hasilnya...

Note :
Untuk previewnya bisa langsung anda lihat pada gambar di atas, hasilnya kurang lebih seperti itu.

Cukup sekian postingan tentang cara membuat widget labels atau category menjadi dua kolom ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Membuat Widget Search Box Sederhana

Membuat Widget Search Box Sederhana - Widget search box di dalam suatu blog/web memang sangat penting dan berguna sekali karena di gunakan sebagai alat pencari yang efektif dan praktis. Pengunjung tidak perlu repot-repot menjelah dan menelusur untuk mendapatkan artikel yang sedang di carinya. Jadi bisa langsung mencarinya lewat widget search box ini.

Di sini saya akan share tentang cara membuat widget search box sederhana, scriptnya mudah dan simple banget, jadi tidak sulit untuk di pelajari. Silahkan bisa anda simak tutorial tentang cara membuat widget search box sederhana berikut ini dengan baik!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

Style 1 :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/><input id="search-btn"
value="Search" type="submit"/>
</form>

Hasilnya :

6. Lalu klik save/simpan. dan selesai...

Sebenarnya cara untuk membuat widget search box ini mudah dan simple sekali, jadi jangan beranggapan sulit kalau belum pernah mencobanya. Sekian postingan mengenai tutorial membuat widget search box sederhana ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Membuat Sitemap Accordion Dengan Sortiran Category

Membuat Sitemap Accordion Dengan Sortiran Category - Sitemap accordion ini memang sangat unik dan menarik sekali. Selain itu, sitemap accordion ini juga memiliki fungsi yang sangat penting. Jika di ibaratkan sebuah buku, maka sitemap ini seperti daftar isi bagi blog anda di mana segala seuatu yang berkaitan dengan konten/artikel blog anda di muat.

Untuk membuat sitemap accordion ini lebih baik anda letakkan di bagian static page atau di dalam postingan saja, karena agar bobot blog anda tidak terlalu berat. Langsung saja simak tutorial cara membuat sitemap accordion dengan sortiran category berikut ini!

1. Pertama, silahkan buat lama (static page) baru dengan cara klik menu "Laman" lalu pilih "Laman Kosong".

2. Kemudian anda akan menemui tulisan html pada bagian laman tersebut (sebelah compose). Klik tulisa html tersebut.

3. Lalu masukkan script kode berikut ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" />
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true, 
    maxNew     = 10,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://ngeposta.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

4. Klik publikasikan/simpan dan selesai...

Note :
Ganti http://ngeposta.blogspot.com dengan alamat url blog anda.

Untuk penyesuaian kode sitemap accordion dengan sortiran category ini bisa anda lihat pada tabel berikut ini!

Opsi	Nilai	Keterangan
showNew	true	Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.
	false
accToc	true	Jika bernilai true, efek akordion akan diterapkan, jika bernilai false, efek akordion akan hilang sehingga semua daftar isi akan terlihat.
	false
openNewTab	true	Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
	false
maxNew	1, 2, 3, ... (numerik)	Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
baru	"Baru!", "New!", "Terbaru!", ... (teks)	Digunakan untuk mengubah teks Baru!.
sDownSpeed	"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)	Digunakan untuk menentukan kecepatan efek .slideDown() panel.
sUpSpeed	"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)	Digunakan untuk menentukan kecepatan efek .slideUp() panel.

Cukup sekian dulu postingan pada kesempatan kali ini, semoga postingan tentang cara membuat sitemap accordion dengan sortiran category ini bermanfaat bagi anda. Selebihnya saya mohon ma'af. Gambar dan referensi dari postingan ini di kutip dari DTE (hompimpaalaihumgambreng). Salam sejahtera by ngeposta...

Membuat Navigasi Top Menu Container

Membuat Navigasi Top Menu Container - Navigasi top menu container adalah salah satu elemen yang tidak kalah penting dengan menu navigasi horizontal pada umumnya. Navigasi top menu container ini fungsinya sama dengan menu navigasi horizontal, yaitu sebagai media one click untuk menuju ke halaman inti dari sebuah blog seperti, home, about, contact, service, dll.

Navigasi top menu container ini sering kita jumpai di website/blog yang memiliki banyak menu utama. Untuk membuat navigasi top menu container ini silahkan bisa anda simak dan ikuti tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

/* Top Menu Container Ngeposta */
#topmenucontainer{
background-image: -webkit-gradient(linear, left top, left bottom, from(#D50B0B), to(#ff0000));
vertical-align: baseline;
z-index: 999;
line-height: 1.85em;
height:40px;
display:block;
width:100%;
padding:0 0 0 0;
font:13px oswald, Arial,Tahoma,Century gothic,verdana,sans-serif;
font-weight:normal;
}
#topmenu{
margin:0 auto;
padding:0 0;
height:40px;
overflow:hidden;
width:1000px
}
#topmenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#topmenu li{float:left;list-style:none;margin:0;padding:0;font-weight: bold;}
#topmenu li a,#topmenu li a:link,#topmenu li a:visited{
color:#000;display:block;margin:0;padding:0 10px;line-height:44px; border-left: 2px solid #ccc;margin-left: 5px;
}
#topmenu li a:hover,#topmenu li a:active{
margin:0;
padding:0 10px;
line-height:40px;
text-decoration:none;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#D50B0B));
}
#topmenu li li a,#topmenu li li a:link,#topmenu li li a:visited{
width:140px;
color:#000;
float:none;
margin:0;
padding:0 10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-weight:normal;
line-height:25px;
text-shadow:none
}
#topmenu li li a:hover,#topmenu li li a:active{
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#D50B0B));
color:#000;
padding:0 10px;
line-height:25px;
background: #999;
}
#topmenu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:160px;
margin:0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #none;
padding:0 0 5px 0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ea0000));
}
#topmenu li li{}
#topmenu li ul a{width:140px}
#topmenu li ul a:hover,#topmenu li ul a:active{}
#topmenu li ul ul{margin:-35px 0 0 200px}
#topmenu li:hover ul ul,#topmenu li:hover ul ul ul,#topmenu li.sfhover1 ul
ul,#topmenu li.sfhover1 ul ul ul{left:-999em}
#topmenu li:hover ul,#topmenu li li:hover ul,#topmenu li li li:hover ul,#topmenu li.sfhover ul,#topmenu li li.sfhover1 ul,#topmenu li li li.sfhover1 ul{left:auto}
#topmenu li:hover,#topmenu li.sfhover1{position:static}

5. Setelah itu cari kode <body> dan letakkan script kode berikut ini tepat di bawahnya!

<!--TOP MENU-->
<div id='topmenucontainer'>
<div id='topmenu'>
<ul>
<li><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Belajar CSS</a></li>
<li><a href='#'>Belajar HTML</a></li>
<li><a href='#'>Belajar PHP</a></li>
<li><a href='#'>Belajar JavaScript</a></li>
<li><a href='#'>Bllog Design</a></li>
</ul>
</li>
<li>
<a href='#'>Service</a>
<ul class='sub-menu'>
<li><a href='#'>Template Editing</a></li>
<li><a href='#'>Web Programming</a></li>
</ul>
</li>
<li><a href='#'>Social Media</a>
<ul class='sub-menu'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Yahoo!</a></li>
</ul></li>
</ul>
<li><a href='#'>Privacy and Policy</a></li>
<li><a href='#'>News Flash</a></li>
<li><a href='#'>Blogger</a></li>
</div>
</div> 
<!--TOP MENU ENDS-->

6. Lalu klik save/simpan template, selesai dan lihat hasilnya...

Note :
Ganti tanda # dengan alamat url tujuan anda dan ganti tulisan di sebelahnya sesuai dengan alamat url yang di tuju. Untuk mendapatkan hasil yang sesuai dan pas dengan template blog anda, silahkan anda ubah dan sesuaikan kode seperti background, color, hover, ataupun atribut lainnya sesuai selera anda.

Cukup sekian postingan mengenai cara membuat navigasi top menu container ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...

Tutorial Edit Pesan Di atas Kotak Komentar Blog

Tutorial Edit Pesan Di atas Kotak Komentar Blog - Hello guys! Seelumnya pada postingan yang lalu saya sudah share tutorial tentang cara membuat pesan di atas kotak komentar blog, dan pada kesempatan kali ini saya akan share tutorial edit pesan di atas kotak komentar blog. Maksudnya adalah memodifikasi/mengubah pesan di atas kotak komentar blog tersebut, baik itu text/tulisannya ataupun background utamanya. Saya sarankan sebelum anda membaca postingan ini sebaikya anda baca dulu postingan sebelumnya tentang cara membuat pesan di atas kotak komentar blog.

Oke, bagi anda yang ingin segera mencobanya silahkan ikuti tutorial edit pesan di atas kotak komentar blog di bawah ini dengan baik!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode <p><data:blogCommentMessage/></p> (gunakan Ctrl+F untuk mencarinya) dan hapus/ganti kode tersebut dengan kode berikut ini :

<div id='pra-comment'><data:blogCommentMessage/></div>

5. Setelah itu, cari kode ]]></b:skin> dan letakkan script kode berikut ini tepat di atasnya!

/* edit pesan komentar by ngeposta */
#pra-comment{
background:#F2F2F2;
width:480px;
height:100px;
padding:10px;
font:normal 13px trebuchet ms;
text-align:justify;
border:1px solid #EFF0F1;
margin:0 10px 5px 0;
line-height: 1.8em;
}

#pra-comment a{font-weight:bold;}
#pra-comment b{color: #000000;}
#pra-comment em b{Color:#ff0000;}

6. Lalu klik save/simpan template, selesai dan lihat hasilnya...

Note :
Silahkan anda sesuaikan background, height, width, paddingnya sesuai dengan keinginan anda.

Pastinya mudah dan simple sekali kan...??? Mungkin cukup sekian dulu postingan tentang tutorial edit pesan di atas kotak komentar blog ini, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Semoga postingan ini bisa bermanfaat dan salam sejahtera by ngeposta...

Membuat Animasi Cloud (Awan) Dengan CSS3

Membuat Animasi Cloud (Awan) Dengan CSS3 - Pada kesempatan kali ini saya akan share sedikit tutorial tentang cara membuat animasi cloud (awan) dengan CSS3. Efek animasi ini sangat menarik dan unik... Selain itu, efek ini juga bisa membuat blog anda menjadi lebih menarik dan lebih bagus lagi dalam segi design tampilannya.

Cara membuatnya cuku simple sekali, kita hanya perlu membuat efek animasinya menggunakan CSS3 dan kemudian kita panggil dengan syntax html biasa. Untuk lebih jelasnya silahkan bisa anda simak tutorial tentang cara membuat animasi cloud (awan) dengan CSS3 berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script CSS berikut di atas kode ]]></b:skin> dan script HTML berikut di bawah kode <body>.

Script CSS :

#cloud1-ngeposta {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.cloud1-ngeposta {
width: 200px; height: 60px;
background: #ddd;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud1-ngeposta:before, .cloud1-ngeposta:after {
content: '';
position: absolute;
background: #ddd;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud1-ngeposta:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.gray1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.gray2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.gray3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.gray4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.gray5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

Script HTML :

<div id='cloud1-ngeposta'>
<div class='cloud1-ngeposta gray1'></div>
<div class='cloud1-ngeposta gray2'></div>
<div class='cloud1-ngeposta gray3'></div>
<div class='cloud1-ngeposta gray4'></div>
<div class='cloud1-ngeposta gray5'></div>
</div>

5. Kemudian klik save/simpan template, selesai dan lihat hasilnya... :)

Note :
Warna dari cloud (awan) tersebut bisa anda sesuaikan sendiri, caranya dengan mengubah/mengganti kode yang saya beri warna hijau (lihat pada script CSS di atas) dengan kode warna pilihan anda. Dan untuk previewnya bisa langsung anda lihat pada halaman postingan ini...

Selamat mencoba dan semoga postingan tentang cara membuat animasi cloud (awan) dengan CSS3 ini bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Memasang Energy Saving Mode di Blog

Memasang Energy Saving Mode di Blog - Untuk membuat kesan yang lebih menarik pada blog kita, maka energy saving mode ini bisa anda terapkan pada blog anda. Energy saving mode ini akan memberikan efek seolah-olah blog kita terkesan memiliki penghemat daya ketika pointer mouse tidak di gerakkan dalam jangka waktu beberapa detik. Sebenarnya energy saving mode ini lebih mirip atau menyerupai dengan screensaver yang ada pada hp atau komputer, kurang lebih cara kerjanya seperti itu.

Langsung saja bagi anda yang berminat silahkan ikuti tutorial cara memasang energy saving mode di blog berikut ini dengan baik dan seksama!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode </head> dan letakkan script kode berikut ini tepat di atasnya.

Energy saving mode dalam bahasa Inggris :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=30'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

Energy saving mode dalam bahasa Indonesia :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id'
type='text/javascript'/>
<script>jQuery.noConflict();</script>

5. Cukup pilih salah satu dari kedua script kode di atas, setelah itu klik save/simpan template. Selesai dan lihat hasilnya...

Selamat mencoba... Semoga berhasil dan semoga bermanfaat bagi anda. Cukup sekian dulu postingan tentang cara memasang energy saving mode di blog ini. Selebihnya saya mohon ma'af atas segala kekuranggan yang ada, dan apabila ada hal yang ingin di tanyakan silahkan tinggalkan komentar anda. Salam sejahtera by ngeposta...

Membuat Menu Navigasi Horizontal di Sertai Sub Menu Vertikal

Membuat Menu Navigasi Horizontal di Sertai Sub Menu Vertikal - Pada kesempatan kali ini saya akan share sedikit tentang cara membuat menu vavigasi horizontal di sertai sub menu vertikal. Menu navigasi horizontal ini memang terbilang sangat di butuhkan kehadirannya dalam blog kita karena memiliki fungsi yang cukup penting dalam hal untuk menunjukkan apa saja yang ada atau di miliki oleh blog kita.

Untuk preview atau tampilan hasil jadinya bisa langsung anda lihat pada gambar di atas. Oke, langsung saja simak dengan baik tutorial cara membuat menu vavigasi horizontal di sertai sub menu vertikal di bawah ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

 4. Kemudian cari kode ]]></b:skin> dan letakkan script kode berikut ini tepat di atasnya.

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

5. Klik save/simpan template.
6. Kemudian kita tentukan di mana letak menu navigasi horizontal tersebut akan di tampilkan dengan cara :

- Masuk ke halaman "Tata Letak".

- Klik "Tambah Gadget".

- Kemudian pilih "HTML/JavaScript".

- Lalu masukkan script kode berikut ini di dalamnya!

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
<li><a href='#'>Menu 2.3</a></li>
<li><a href='#'>Menu 2.4</a></li>
</ul></li>

<li><a href='#'>Menu 3</a></li>
 
<li><a href='#'>Menu 4</a></li>

<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Menu 5.1</a></li>
<li><a href='#'>Menu 5.2</a></li>
<li><a href='#'>Menu 5.3</a></li>
<li><a href='#'>Menu 5.4</a></li>
<li><a href='#'>Menu 5.5</a></li>
<li><a href='#'>Menu 5.6</a></li>
<li><a href='#'>Menu 5.7</a></li>
<li><a href='#'>Menu 5.8</a></li>
<li><a href='#'>Menu 5.9</a></li>
</ul></li>

<li><a href='#'>Menu 6</a>
<ul>
<li><a href='#'>Menu 6.1</a></li>
<li><a href='#'>Menu 6.2</a></li>
<li><a href='#'>Menu 6.3</a></li>
<li><a href='#'>Menu 6.4</a></li>
<li><a href='#'>Menu 6.5</a></li>
<li><a href='#'>Menu 6.6</a></li>
</ul></li>

<li><a href='#'>Menu 7</a></li>

<li><a href='http://ngeposta.blogspot.com'>Ngeposta</a></li>

</ul>
</div>

- Dan yang terakhir klik save/simpan, selesai dan lihat hasilnya...

Note :
Ganti tanda # dengan alamat url (link) yang akan menjadi tujuan setelah menu itu di klik. Dan ganti atau sesuaikan tulisan Menu 1-7 dengan teks/tulisan yang anda inginkan.

Cukup sekian dulu postingan saya pada kesempatan kali ini mengenai cara membuat menu vavigasi horizontal di sertai sub menu vertikal, selamat mencoba dan semoga bermanfaat! Selebihnya saya mohon ma'af apabila banyak terdapat kekurangan. Salam sejahtera by ngeposta...