Meta Tag SEO Friendly Untuk Blog Anda

Meta Tag SEO Friendly Untuk Blog Anda - Meta tag sangatlah penting untuk diperhatikan dan tentunya sangat bermanfaat karena langsung berhubungan dengan meta yang ada pada hasil pencarian konten blog kita di search engine. Oleh karena itu sudah semestinya kita pkirkan untuk membuatnya lebih SEO friendly supaya blog kita menjadi lebih di sayang search engine.

Untuk cara pemasangannya sendiri mudah sekali, silahkan anda simak dan ikuti tutorial tentang cara memasang meta tag SEO friendly berikut ndengan benar!

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

3. Lalu klik "Edit HTML".

4. Kemudian cari kode berikut ini :

<b:include data='blog' name='all-head-content'/>

5. Lalu letakkan kode berikut tepat di bawahnya!

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Tulis Deskripsi Blog Anda' name='description'/>
<meta content='Tulis Keyword Blog Anda' name='keywords'/>
<meta content='http://url-blog-anda.blogspot.com' name='subject'/>
<meta content='Tulis Deskripsi Blog Anda' name='Abstract'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if><meta expr:content='data:blog.pageName + &quot; - Tulis Deskripsi Blog Anda&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; - Tulis Keyword Blog Anda&quot;' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='Abstract'/>
</b:if>
<meta content='Hak Cipta' name='copyright'/>
<meta content='Tulis Nama Anda' name='author'/>
<meta content='UTF-8' name='Charset'/>
<meta content='Global' name='Distribution'/>
<meta content='General' name='Rating'/>
<meta content='INDEX FOLLOW' name='Robots'/>
<meta content='1 days' name='revisit'/>
<meta content='1 Days' name='Revisit-after'/>
<meta content='ID' name='language'/>
<meta content='ID' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='index,follow,snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>

6. Langkah terakhirnya adalah tinggal klik simpan/save template, dan selesai...

Semoga tutorial yang saya berikan tentang meta tag SEO friendly untuk blog anda pada kesempatan kali ini bisa bermanfaat bagi anda, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Terima kasih atas kunjungan anda dan salam sejahtera by ngeposta.

Cara Membuat Rating Bintang Pada Postingan di Blog

Cara Membuat Rating Bintang Pada Postingan di Blog - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat rating bintang pada postingan di blog. Rating bintang, maksudnya adalah bahwa setiap postingan/artikel yang telah anda publish nantinya akan di hitung jumlah suara/rating dengan icon bintang yang di peroleh oleh poostingan/artikel anda tersebut dengan batas nilai maksimal yang telah di tentukan. Rating ini nantinya akan muncul pada setiap hasil penelusuran di search engine google.

Contoh tampilannya adalah seperti gambar berikut ini :

Nahh, kurang lebih jika anda mengeceknya di http://www.google.com/webmasters/tools/richsnippets maka hasilnya akan tampak seperti gambar tersebut. Dan untuk cara membuatnya silahkan bisa anda simak tutorial tentang cara membuat rating bintang pada postingan 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 <head> dan letakkan script berikut ini tepat di bawahnya!

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='url profile google+' rel='publisher'/>
</b:if>

*Ganti tulisan "url profile google+" dengan alamat url profile google plus anda.
Contoh : https://plus.google.com/107747490223618304612

5. Tambahkan kode berikut ini tepat di bawah kode <body> :

<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>

6. Dan tambahkan kode </div></div> di atas kode </body>.

7. Tambahkan kode berikut tepat di bawah kode <data:post.body/> :

Description: <span itemprop="description"><data:post.title/></span>
Rating: <span itemprop='rating'>4.5</span>
Reviewer: <span itemprop='reviewer'><data:post.author/></span>
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>

8. Setelah itu klik save/simpan template dan selesai...

Demikian postingan tentang cara membuat rating bintang pada postingan di blog ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

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 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 Animasi Auto Typing Text Menggunakan JavaScript

Membuat Animasi Auto Typing Text Menggunakan JavaScript - Kalo kita bicara mengenai animasi, pastinya kita akan lagsung merasa penasaran dan ingin segera melihat atau bahkan mengetahuinya. Nahh, kali ini saya akan share tentang cara membuat animasi auto typing text menggunakan JavaScript. Animasi auto typing text di sini maksudnya adalah animasi ketikan otomatis (mengetik sendiri), artinya tulisan yang sudah kita siapkan akan secara otomatis mengetik sendiri (muncul satu persatu dengan sendirinya).

Masih bingung? Kalo begitu langsung saja kita menuju ke tutorial cara membuat animasi auto typing text menggunakan JavaScript berikut ini... Silahkan bisa anda simak lalu ikuti dengan baik dan seksama!

Animasi auto typing text menggunakan JavaScript ini bisa anda letakkan di dalam postingan ataupun di sidebar sebagai widget eksternal. Jadi anda tidak usah kebingungan karena mau di letakkan di mana saja bisa. Caranya anda tinggal copy/salin script kode di bawah ini lalu pastekan di tempat yang anda inginkan.

<form name="news">
<textarea cols="50" name="news2" rows="3" wrap="virtual"></textarea>
</form>
<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = "Hello Sobat Ngeposta!";
newsText[1] = "Anda Sedang Membaca Artikel Tentang:";
newsText[2] = "Membuat Animasi Auto Typing Text";
newsText[3] = "Semoga Bermanfaat Bagi Sobat Semua...";
newsText[4] = "Dan Selamat Mencoba!";
newsText[5] = "Jangan Lupa Tinggalkan Komentar Sobat...";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 100; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>

Hasilnya :

Note :
Untuk value (isi) dari newsText[0] sampai dengan newsText[5] bisa anda ganti dan sesuaikan dengan keinginan anda sendiri.

Sekian dulu postingan tentang cara membuat animasi auto typing text menggunakan JavaScript ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kesalahan 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 Paragraf Dua Kolom Dalam Postingan

Membuat Paragraf Dua Kolom Dalam Postingan - Untuk membuat paragraf dua kolom dalam postingan, caranya cukup mudah saja. Anda hanya perlu menggunakan selector CSS yaitu column-count dan column-gap kemudian anda padukan dengan tag HTML biasa seperti <div> atau <span>. Fungsi dari membuat paragraf dua kolom dalam postingan ini adalah membuat kesan indah dan rapi, selain itu juga untuk menghemat ruang teks yang ada supaya bisa di manfaatkan untuk menampung isi yang lainnya.

Cara membuat paragraf dua kolom dalam postingan ini sangat simple dan scriptnya pun menurut saya pribadi sangat mudah untuk di pahami, Berikut tutorial cara membuat paragraf dua kolom dalam postingan, silahkan simak dan perhatikan dengan baik!

1. Copy dan pastekan script berikut ini di dalam halaman menu posting/edit posting blog anda.

<div style="background-attachment: scroll; background: #f0f0f0;
-moz-column-count: 2; -moz-column-gap: 25px; -webkit-column-count: 2;
-webkit-column-gap: 25px; -o-column-count: 2; -o-column-gap: 25px;
column-count: 2; column-gap: 25px; height: auto;
width: auto; padding: 10px">

Masukkan teks anda di sini!

</div>

2. Ganti tulisan "Masukkan teks anda di sini!" dengan tulisan yang anda inginkan dan selesai.

Maka hasilnya kurang lebih akan terlihat seperti berikut ini :

Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda.

Cukup sekian postingan tentang cara membuat paragraf dua kolom dalam postingan ini, semoga bermanfaat bagi anda semua. 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...

Memasang Widget Google Translator Sendiri

Memasang Widget Google Translator Sendiri - Widget goolge translator sekarang memang sudah di sediakan oleh blogger.com, namun widget google translator yang ada cukup membuat berat bobot blog. Dan saya di sini mau share cara memasang widget google translator sendiri yang pastinya lebih ringan bobotnya. Sehingga tidak terlalu mempengaruhi berat blog anda.

Widget google translator ini memang sangat penting untuk membuat blog kita menuju ke dunia internasional, karena dengan adanya widget google translator ini, maka pengunnjung asing akan lebih mudah untuk membaca isi/konten blog kita dengan men-translatenya sesuai bahasa mereka.

Berikut cara memasang widget google translator sendiri. Silahkan bisa anda simak 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 :

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

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

Note :
Untuk previewnya bisa langsung anda lihat di blog ini karena widget google translator ini juga saya pasang.

Sekian postingan tentang cara memasang widget google translator sendiri ini, semoga bermanfaat dan selebihnya saya mohon ma'af. Apabila ada hal yang ingin di tanyakan silahkan tinggalkan komentar anda. Salam sejahtera by ngeposta...

Membuat Widget Pintar "Tahukah Anda?"

Membuat Widget Pintar "Tahukah Anda?" - Widget yang satu ini lain dari pada yang lain, karena jika pada umumnya jika widget itu di khususkan untuk mempercantik tampilan blog, namun widget pintar "tahukah anda?" ini lebih untuk tujuan memberikan wawasan dan pengetahuan yang lebih kepada para pengunjung.

Widget pintar "tahukan anda?" ini di buat menggunakan JavaScript, lebih tepatnya menggunakan fungsi array yang ada dalam bahasa JavaScript. Berikut lagkah-langkah untuk membuat widget pintar "tahukah anda?" menggunakan JavaScript!

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 :

<b><blink>Tahukah Anda?</blink></b>
<div style="margin-top: 5px; text-align: justify;">
<b>"</b><script language="JavaScript">
var Quotation=new Array() // do not change this!
Quotation[0] = "Bahwa kipas angin di langit-langit menggunakan tenaga listrik yang sama banyaknya dengan lampu 60 watt. Itu berarti listrik yang di gunakan sekitar 98% lebih sedikit daripada kebanyakan pendingin udara.";
Quotation[1] = "Bahwa setiap kali Napoleon Bonaparte mengenakan sapu tangan hitam di lehernya pada suatu pertempuran, ia selalu menang. Di Waterloo, ia mengenakan dasi putih dan kalah.";
Quotation[2] = "Bahwa bayi manusia di lahirkan dengan 300 potong tulang, namun pada usia dewasa manusia hanya mempunyai 206 tulang di tubuhnya.";
Quotation[3] = "Bercumbu baik untuk menyembuhkan rasa sakit. Penelitian menunjukkan bahwa aktivitas berciuman bisa meningkatkan kekencangan kulit, membantu sirkulasi darah, mencegah gigi berlubang, bahkan bisa mengusir sakit kepala.";
Quotation[4] = "Bahwa katak mampu bertahan hidup bertahun-tahun tanpa makan & minum.";
Quotation[5] = "Bahwa lebah ternyata dapat mengenali wajah manusia.";
Quotation[6] = "Indonesia adalah negara Asia pertama yang ikut Piala Dunia 1938 dengan nama Hindia-Belanda.";
Quotation[7] = "Bahwa rolet di ciptakan oleh filsuf dan matematikawan besar Perancis, Blaise Pascal. Rolet adalah produk sampingan dari eksperimennya tentang gerakan abadi.";
Quotation[8] = "Bahwa Adolf Anderssen adalah pemain catur paling tangguh di dunia antara tahun 1859-1866. Ketika meninggal dunia, obituarinya mencapai 19 halaman.";
Quotation[9] = "Bahwa simbol mata uang dollar $ tidak di ketahui berasal dari mana, namun kemungkingan berasal dari huruf U dan S (U.S).";
Quotation[10] = "Tertawa dengan keras bisa mendorong otak keluar dari tengkoraknya.";
Quotation[11] = "Bahwa sebelum uang kertas di gunakan, Amerika menggunakan kulit rusa (buckskins). Hingga sekarang orang mengenall istilah bucks.";
Quotation[12] = "Jika kamu memiliki 10 triliun rupiah dan menghabiskan 1000 rupiah setiap detik, di butuhkan 317 tahun sebelum kamu jatuh miskin.";
Quotation[13] = "Rata rata remaja bermain internet 31 jam per minggu.";
Quotation[14] = "Dalam seumur hidupnya seseorang menghasilkan air liur rata-rata 25.000 liter.";
Quotation[15] = "Bahwa jika kamu berteriak terus menerus selama 8 tahun, 7 bulan dan 6 hari, energi yang kamu keluarkan akan cukup untuk memanaskan secangkir kopi.";
Quotation[16] = "Jika kamu kentut secara konsisten selama 6 tahun 9 bulan, kamu akan menghasilkan gas yang cukup untuk menciptakan energi yang di perlukan dalam membuat bom atom.";
Quotation[17] = "Tulang paha manusia lebih kuat daripada dinding semen.";
Quotation[18] = "Saat ini ada 45 negara yang ada mengajarkan bahasa Indonesia, di antaranya Australia, Amerika, Kanada, & Vietnam.";
Quotation[19] = "Membenturkan kepala ke tembok dapat menghabiskan 150 kalori setiap jamnya.";
Quotation[20] = "Seekor kecoa mampu bertahan hidup selama 9 hari tanpa kepala, sebelum mati karena kelaparan.";
Quotation[21] = "Warna kebiruan pada pangkal kuku menandakan kurang beresnya sirkulasi darah dan merupakan gejala penyakit jantung.";
Quotation[22] = "Seekor induk kelinci bila ketakutan dapat meninggalkan atau bahkan memakan anak-anaknya.";
Quotation[23] = "Dari hasil penelitian di Amerika, kemasan Barbie mengandung bahan dari kayu hutan alam Indonesia.";
Quotation[24] = "Dalam sebuah survei di AS, 81% pengacara perceraian melihat adanya peningkatan bukti kasus yang berasal dari situs jejaring sosial.";
Quotation[25] = "India mundur dari Piala Dunia 1950, karena para pemainnya tidak mau memakai sepatu.";
Quotation[26] = "Jika Facebook merupakan sebuah negara, maka akan menjadi negara terbesar ke-3 di dunia.";
Quotation[27] = "Harga bensin di Venezuela lebih murah dari pada harga air.";
Quotation[28] = "Sebelum menulis Harry Potter, J.K. Rowling menganggur dan hidup pada bantuan pemerintah.";
Quotation[29] = "Mengendarai sepeda dengan tangan terlepas di Sun Praire, Wisconsin, merupakan hal yang melanggar hukum.";
Quotation[30] = "Para wanita dari suku Tiwi di Pasifik Selatan kebanyakan menikah saat lahir.";
Quotation[31] = "Satu juta orang di dunia per tahun melakukan bunuh diri. Artinya satu kematian setiap 40 detik. Kasus bunuh diri meningkat sebanyak 60% di 45 tahun terakhir.";
Quotation[32] = "Bahwa perempuan berkedip dua kali lebih banyak dari pada laki-laki.";
Quotation[33] = "Ketika kita tersenyum, kita melibatkan 17 otot.";
Quotation[34] = "Rata-rata orang Amerika berjalan 18.000 langkah per hari.";
Quotation[34] = "Bahwa Vatikan bukan hanya kota terkecil di dunia, tetapi juga salah satu negara di dalam negara lain, yaitu Italia. Negara lainnya adalah San Marino, juga terdapat di dalam Italia.";
Quotation[35] = "Pada 1984, Jeff Bezos ingin menamai usahanya di Internet 'Cadabra', seperti dalam 'abracadabra' atau 'sim salabim'. Tetapi pengacaranya meyakinkannya bahwa dalam bahasa Inggris nama itu kedengaran mirip sekali dengan 'jenazah' (cadaver). Akibatnya, Bezos mengambil pilihan yang kedua, yaitu Amazon.com.";
Quotation[36] = "Bahwa benda hidup terbesar di bumi adalah sebuah jamur di bawah tanah di Oregon, Amerika Serikat. Panjangnya melintang sekitar 5,6 km.";
Quotation[37] = "Uang kertas dengan nilai tertinggi di keluarkan Bank of England senilai &#163;1,000,000 pada tahun 1948.";
Quotation[38] = "Bahwa telapak tangan dan kaki memiliki lebih banyak kelenjar keringat dari pada bagian-bagian tubuh yang lainnya.";
Quotation[39] = "Hawaii bergerak ke arah Jepang 10 cm per tahun.";
Quotation[40] = "Bahwa hari ulang tahunmu memiliki kesamaan dengan sekitar 9.000.000 orang lainya di dunia.";
Quotation[41] = "Bahwa kulit pohon kayu merah tahan api. Kebakaran di hutan kayu merah terjadi di dalam pohonnya.";
Quotation[42] = "Bahwa Yaman memiliki tingkat kesuburan total tertinggi di dunia, yaitu 7,6. Sementara itu negara dengan tingkat kesuburan terendah adalah Swiss, yaitu 1,5.";
Quotation[43] = "Bahwa kelelawar coklat kecil dapat menangkap 1.200 serangga sebesar nyamuk dalam waktu 1 jam saja.";
Quotation[44] = "Game action melatih otak membuat keputusan yang cepat dan akurat.";
Quotation[45] = "Bahwa golongan darah para anggota SS Nazi di jadikan tato di ketiak mereka.";
Quotation[46] = "Tahun 2007, pemerintah Perancis tidak mengizinkan parlemennya menggunakan Blackberry.";
Quotation[47] = "Bahwa belum ada lobster biru yang melahirkan anak berwarna biru. Artinya warna biru tersebut bukanlah warna turunan dari induknya.";
Quotation[48] = "Naik mobil ke matahari bisa di capai 193 tahun dengan kecepatan 88,5 km/jam.";
Quotation[49] = "Berat patung Liberty mencapai lebih dari 225 ton.";
Quotation[50] = "Memakai Headphone selama 1 jam dapat mengembangbiakan bakteri dalam kuping 700 kali lebih cepat.";
Quotation[51] = "Perempuan Jepang jago dalam urusan seks. Mereka memiliki usia harapan seks paling lama di dunia. Rata-rata perempuan di Negeri Matahahari Terbit itu, masih bisa melakukan hubungan seksual di usia 86 tahun.";
Quotation[52] = "Bahwa Pria yang memiliki usia harapan seks paling lama adalah penduduk San Marino. Di rata-rata usia 81 tahun, pria San Marino masih bisa melakukan hubungan seks.";
Quotation[53] = "Bahwa lidah kita mempunyai kurang lebih 10.000 indra perasa untuk mencicipi makanan.";
Quotation[54] = "Merokok dapat mengurangi massa tulang dan terganggunya sistem hormonal, terutama Estrogen pada wanita sehingga menyebabkan menopause dini.";
Quotation[55] = "Bahwa semakin cepat anda bergerak, maka anda akan semakin berat. Hal ini tidaklah permanen, tetapi sesaat akan menambah berat anda. Menurut teori relativitas, massa dan energi adalah sama. Semakin banyak energi yang di keluarkan, semakin berat massanya.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script><b>"</b>
</div>

6. Lalu klik save/simpan dan selesai.

Note :
Untuk teks quotation bisa anda ganti sesuai dengan selera anda sendiri. Dan silahkan di kembangkan lagi agar lebih bagus...

Cukup sekian postingan tentang cara membuat widget pintar "tahukah anda?" ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Special thanks to ZamrudBlog. 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...

Cara Mengganti Background Teks Yang di Blok (Selected Text)

Cara Mengganti Background Teks Yang di Blok (Selected Text) - Teks yang di blog (selected text) maksudnya adalah tulisan/teks yang di tandai/dipilih ketika kita akan melakukan adegan paling menegangkan (menurut saya xD) yaitu adegan copy-paste. Artinya warna background teks yang di blok (selected text) pada saat akan melakukan adegan copy-paste tersebut bisa di ganti/di rubah sesuai dengan keinginan anda. Pada umunya, secara default (normal) warna background teks yang di blok (selected text) adalah biru (perhatikan gambar di atas).

Untuk mengganti background teks yang di blok (selected text) silahkan bisa anda ikuti dan simak tutorial tentang cara mengganti background teks yang di blok (selected text) 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!

::selection {background:#00FF00;color:#FFFFFF;}
::-moz-selection {background:#00FF00;color:#FFFFFF;}
::-webkit-selection {background:#00FF00;color:#FFFFFF;}
::-o-selection {background:#00FF00;color:#FFFFFF;}

5. Kemudian cari kode </head> dan letakkan script code di bawah ini tepat di atasnya!

<style type='text/css'>
::selection {background:#00FF00;color:#FFFFFF;}
::-moz-selection {background:#00FF00;color:#FFFFFF;}
::-webkit-selection {background:#00FF00;color:#FFFFFF;}
::-o-selection {background:#00FF00;color:#FFFFFF;}
</style>

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

Note :
#00FF00 merupakan kode warna background, silahkan bisa anda ganti sesuai keinginan. Sedangkan #FFFFFF adalah kode warna teks, bisa anda ganti dan sesuaikan sendiri.

Cukup sekian tutorial tentang cara mengganti background teks yang di blok (selected text) ini dan semoga bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Cara Membuat Efek Bayangan (Box Shadow)

Cara Membuat Efek Bayangan (Box Shadow) - Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara membuat efek bayangan (box shadow) menggunakan CSS, tepatnya dengan CSS3. Sebenarnya CSS itu kaya akan keunikan dan keindahan jika kita pelajarai lebih dalam dan lebih detail lagi. Semakin dalam kita belajar CSS, akan semakin besar rasa ingin tahu kita tentang apa saja yang bisa di lakukan oleh CSS ini.

Efek bayangan (box shadow) ini memang sangat menarik dan pastinya memiliki daya pikat tersendiri bagi mata. Oke, langsung saja bagi anda yang ingin mencoba untuk membuat efek bayangan (box shadow) ini silahkan bisa anda simak dan perhatikan tutorial cara membuat efek bayangan (box shadow) berikut ini!

Syntax dasar untuk membuat efek bayangan (box shadow) dengan CSS3 :

box-shadow: x-point y-point blur spread color inset;

Keterangan :
1. x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, jika bernilai positif maka akan mengarah ke samping kanan.
2. y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
3. blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
4. spread merupakan ukuran dari bayangan itu sendiri.
5. color untuk menetukan warna bayangan yang akan di hasilkan.
6. inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.

Perhatikan gambar di bawah ini!

Dan berikut adalah script CSS untuk membuat efek bayangan (box shadow) seperti gambar di atas, mulai dari yang A-F.

Kotak A (tanpa menggunakan efek blur) :

#kotak_A{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Kotak B (ada tambahan efek blur sebesar 5px) :

#kotak_B{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Kotak C (ada tambahan spread sebesar 5px) :

#kotak_C{
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Kotak D (ada tambahan efek blur dan spread sebesar 5px) :

#kotak_D{
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Kotak E (tanpa x-point dan y-point dengan efek blur sebesar 5px) :

#kotak_E{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Kotak F (sama dengan kotak E dengan tambahan spread sebesar 5px) :

#kotak_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

Nahhh, cukup sekian dulu postingan saya pada kesempatan kali ini. Semoga postingan dengan judul cara membuat efek bayangan (box shadow) ini bermanfaat bagi anda, selebihnya saya mohon ma'af atas segala kekurangan 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...