Optimasi SEO dan Panduan Blogger

Kumpulan Musik Reggae Mp3 Indonesia Terbaru 2014 Free Download

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 31 Mar 2014 01:15:00 +0700

Kumpulan Musik Reggae Mp3 Indonesia Terbaru 2014 Free Download - Kali ini gue akan memberikan beberapa Kumpulan Musik Reggae Mp3 Indonesia Terbaru 2014 yang mesti kalian dengarkan.

Boys N Root - Sandra (Download)
Boys N Root - Berangkat (Download)
Steven Jam - Sangat Menyenangkan (Download)
Steven Jam - Menari (Download)
Steven Jam - Lagi Pengen Sendiri (Download)
Momonon - Go Green (Download)
Momonon - Kopi Hitam (Download)
Momonon - Modust (Download)
Resha strOmp - time will tell (Download)
Resha strOmp - Strads A (Download)
Reggaetarian feat Resha Stromp - Sahabat (Download)
D'blow - Tarian Reggae (Download)
Richard n The Gillis - Ngayal (Download)
Richard n The Gillis - Santai Saja (Download)
Richard n The Gillis - Terdiam (Download)
Souljah - I love my self (Download)
Monkey Boots - Indah Pada Waktunya (Download)
Tony Q & Rastafara - Asap putih (Download)
Tony Q & Rastafara - Tertanam (Download)
Tony Q & Rastafara - This is my way (Download)

Inilah daftar Kumpulan Musik Reggae Mp3 Indonesia Terbaru 2014 yang bisa gue bagikan ke kalian semua, semoga tentram damai di hatimu. Bila ada yang belum terdaftar lagu-lagunya tolong berikan komentar dibawah postingan Kumpulan Musik Reggae Mp3 Indonesia Terbaru 2014 Free Download, terimakasih sebelumnya.

Cara Membuat Subdomain Gratis di Blogspot

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 29 Jul 2013 22:42:00 +0700

Membuat Subdomain Gratis di Blogspot - Kali ini kita akan membahas tentang Cara Membuat Subdomain di Blogspot yang tentunya anda sudah memiliki custom domain TLD, baik yang gratisan atau yang berbayar. Mungkin anda pernah menginginkan sesuatu dari blog anda yang mempunyai subdomain dari domain TLD, tapi anda tidak tahu bagaimana caranya dan ketika tahu caranya pasti kadang subdomain itu mengalami masalah. Seperti halnya ke-Redirectnya domain utama ke subdomain anda, atau malah sebaliknya.

Subdomain yang kita buat ini nantinya akan kita gunakan untuk blogspot, wordpress dan masih banyak lagi. contohnya seperti blog saya www.404.reggaefamz.com subdomain ini saya gunakan untuk auto Redirect halaman error yang tertuju kepada blog saya Ompaps.com. Nah kali ini saya akan membagikan tutorial pada cutom domain di Blogspot. Silahkan baca Subdomain Gratis Terbaru dari Reggaefamz.com

Kita mulai pembahasan Cara Membuat Subdomain Gratis di Blogspot.

1. Masuk pada Setting - Basic - Publishing - Blog Addres.
Setinng Blog Adress anda menjadi seperti gambar dibawah ini, kemudian klik save.

Banyak tutorial ketika kita melakukan Save akan keluar kata ataupun kode untuk penyettingan CNAME kita nanti, tapi untuk blogspot yang sekarang tidak keluar itu, maka kita klik saja Setting Instruction. Maka anda akan ditampilkan halaman seperti dibawah ini.

Ketika anda sudah dibawa kehalaman seperti di atas, anda akan melihat kalimat seperti ini On a top-level domain (www.example.com) dan On a subdomain (foo.example.com), namun kali ini kita memilih kalimat On a subdomain (foo.example.com) untuk mendapatkan CNAME yang akan kita setting nanti di Control Panel Domain. Lihatlah pada tampilan yang saya berikan background merah, itu adalah CNAME-nya.

2. Masuk Ke Control Panel Domain.
Inget, dimana saja anda mendaftarkan domain cara men-settingnya sama saja, namun kali ini saya menggunakan afraid.org yang lebih mudah pengaksesannya.

Setting DNS Record. Klik Manage - Add.

Type A - Subdomain isi dengan subdomain yang anda inginkan - Domain biarkan saja - Destination ubah menjadi 216.239.32.21 - 216.239.34.21 - 216.239.36.21 - 216.239.38.21 atau lebih detailnya anda lihat pada gambar dibawah ini.

DNS Record selesai, sekarang waktunya setting CNAME-nya. lihat pada gambar dibawah ini.

Type CNAME - Subdomain isi dengan subdomain yang anda inginkan (gunakan www) - Domain biarkan saja - Destination ubah menjadi ghs.google.com.

Lanjut mengisi CNAME yang ke-dua, lihat gambar dibawah ini.

Type CNAME - Subdomain isi dengan CNAME yang anda dapatkan tadi - Domain biarkan saja - Destination ubah dengan yang anda dapat tadi bl-BLABLABLA.dv.googlehosted.com. kurang lebih seperti itu. Semua tahapan selesai, sekarang tinggal ulangi cara pada nomer 1.

Terimakasih telah membaca Cara Membuat Subdomain Gratis di Blogspot, kekurangan milik kita dan kelebihan hanya milik yang kuasa. Kalau ada kesalahan atau sulit dimengerti silahkan tinggalkan komentar anda dengan senang hati saya akan membantunya.

2 Template Responsive Blogger Terbaru

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 22 Jul 2013 04:42:00 +0700

Template Responsive Blogger - Template Responsive Blogger Terbaru kali ini saya bagikan untuk sahabat blogger semua, template ini hasil karya ataupun hak cipta dari master blogger yaitu Kang Ismet. Masih ada yang nanya Kang Ismet itu siapa? Coba cari di Google untuk lebih jelasnya. hehe

Ada 2 template yang akan saya bagikan, template ini bernama Zekazev dan Insya Allah menurut yang dikutip Kang Ismet sendiri akan merilis berbagai macam model dari template yang ia kelola. Kita tunggu saja kedepannya tentang perkembangan template ini. Jujur, saya sendiri salah satu dari seribu bahkan sejuta pengguna template responsive Zikazev ini. Btw, Terimakasih Kang Ismet.

Bila anda ragu dengan keakuratan SEO pada template ini silahkan anda check terlebih dahulu di website-website yang menggarap Tools SEO. Menurut saya sendiri template ini lebih dari cukup SEO Friendly, jika tidak silahkan anda merubah struktur template ini dengan standart SEO yang banyak di temukan pada blog-blog master lainnya. Silahkan baca juga postingan saya yang Template Blog Seo Friendly Terbaru

1. Zikazev Blue - Template Responsive Blogger

Penampakan dari template Zikazev Blue seperti ini:

Untuk installasi template ini mungkin sobat tidak akan kesulitan jika anda sudah mengerti panduan HTML di dalam template. Contoh:

<li class='pinterest'><a href='/'><i class='icon-pinterest'/></a>

</li>
<li><a class='twitter' href='/'><i class='icon-twitter'/></a>

</li>
<li><a class='linkedin' href='/'><i class='icon-linkedin'/></a>

</li>
<li><a class='facebook' href='/'><i class='icon-facebook'/></a>

</li>
<li><a class='gplus' href='/'><i class='icon-google-plus'/></a>

</li>

Silahkan ganti tulisan yang saya beri background merah dengan URL akun sosial sobat.

2. Zikazave Simple Gray - Template Responsive Blogger

Penampakan dari template Zikazev Simple Gray seperti ini:

Untuk installasi template ini tidak jauh berbeda dengan template Zikazev Blue, silahkan sobat samakan isi ke-2 template yang saya berikan ini.

Cukup sekian postingan tentang Template Responsive Blogger Terbaru yang saya berikan ini, dan tentunya saya berikan terimakasih yang sebesar-besarnya kepada Kang Ismet selaku pembuat dari template ini dan tak lupa untuk sobat-sobat semua yang sudah mampir dan membaca artikel-artikel di blog saya. Salam Hormat.

Subdomain Gratis Terbaru dari Reggaefamz.com dan Wolesmen.com

coretanputra@gmail.com (Putra Andana Purnama) — Sat, 20 Jul 2013 17:10:00 +0700

Subdomain Gratis Terbaru 2013 - Ompaps Bagi-bagi Subdomain Gratis untuk Blogger - Sebelum saya memberikan Subdomain Gratis atau Custom Domain dari Reggaefamz.com dan Wolesmen.com yang akan saya berikan kepada anda semua khususnya Blogger Indonesia.

Apa itu subdomain?

Subdomain adalah pembagian dari sebuah domain inti. misalkan domain inti dari halaman website yang saya kelola mempunyai domain www.reggaefamz.com maka jika kita ingin membuat sebuah subdomain video.reggaefamz.com. Selain subdomain Limited Edition yah lumayan lah dibanding subdomain dari bawaan blogger.

Karena ada beberapa teman saya yang berminat dengan subdomain ini, maka saya akan memberikan langsung kepada anda semua. Saya harap subdomain yang saya berikan ini jangan disalah gunakan, jika ada sesuatu yang memberatkan hati saya maka tak akan bicara lama untuk saya menghapus subdomain anda.

Jika anda berkenan dengan subdomain yang saya berikan gratis ini, silahkan meninggalkan komentar dipostingan ini atau bisa juga anda melakukan input contact di form contact saya. Mungkin cukup Informasi Subdomain Gratis Terbaru dari Reggaefamz.com dan Wolesmen.com semoga anda salah satu peminatnya.

Membongkar Rahasia Optimasi Meta Tag di Blogger

coretanputra@gmail.com (Putra Andana Purnama) — Thu, 18 Jul 2013 18:25:00 +0700

Membongkar Rahasia Optimasi Meta Tag di Blogger - Pemasangan Meta Tag pada Blogger - kali ini merupakan salah satu rahasia Meta Tag yang di gunakan oleh webmaster terkenal di dunia blogger yaitu Om Agus Ramadhani atau yang lebih dikenal dengan O-om.

Tentunya kalian sudah mengerti tentang Optimasi Meta Tag Platform Blogger jika anda sudah menekuni bidang blogger ini sejak lama, namun tidak untuk blogger - blogger baru yang cuma bisa pasrah dengan kode - kode yang ada di dalam templatenya.

Lihat script dibawah ini yang merupakan hasil Optimasi semua Meta Tag yang O-om dan saya pun gunakan script ini. Jika anda telah memiliki jam terbang tinggi dengan cara pemasangan Meta Tag di dalam template mungkin tidak sangat meribetkan, tetapi jika anda adalah baru ingin belajar tentang Meta Tag ataupun SEO ini adalah hal yang sangat awam sekali. Saya pun masih belajar tentang Meta Tag ataupun SEO, kita bisa menukar ilmu dan saling membantu dalam blog ini dengan meninggalkan komentar saja. Cara pemasangan script dibawah ini cukup anda mencari kode <head> dan letakan script ini tepat dibawahnya.

Untuk mengenal lengkap tentang apa itu Meta Tag silahkan kunjungi artikel saya yang ini Panduan Lengkap Meta Tag di Blogger.

Optimasi Meta Tag Blogger.


<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | Namablog</title>
</b:if>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: | NamaBlog</title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>

<title>Arsip Artikel Bulan <data:blog.pageName/> | NamaBlog</title>

<meta expr:content='"Arsip Artikel Bulan " + data:blog.pageName + " selengkapnya silahkan kunjungi di NamaBlog"' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>

<title><data:blog.pageName/> | NamaBlog</title>

<meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di NamaBlog"' name='description'/>
<b:else/>

<b:if cond='data:blog.searchLabel'>
<title>Pencarian pada Label :: <data:blog.pageName/> :: | NamaBlog</title>

<meta expr:content='"Pencarian pada kategori ::" + data:blog.pageName + ":: selengkapnya silahkan kunjungi di NamaBLog."' name='description'/>
<b:else/>

<title><data:blog.pageTitle/> | NamaBlog</title>

<meta expr:content='data:blog.pageTitle + " Tulis deskripsi blog anda disini."' name='description'/>
</b:if>
</b:if>
</b:if>

<meta content='keyword1, keyword2, dst' name='keywords'/>
<b:else/>

<title><data:blog.pageName/> - NamaBlog</title>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>

<meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di NamaBlog"' name='description'/>
</b:if>

<meta expr:content='data:blog.pageName + ", keyword1, keyword2, dst"' name='keywords'/>
</b:if>

Menurut webmaster pada Optimasi Meta Tag diatas ini sangatlah manjur dan sangat SEO Friendly, anda bisa mengeditnya sesuai dengan kebutuhan.

Mungkin artikel kali ini yang membahas tentang Membongkar Rahasia Optimasi Meta Tag di Blogger cukup sampai disini, jika ada kesempatan saya akan membahas kembali tentang Meta Tag dan Tampilan pada Search Engine. Terimakasih atas perhatian anda. Salam Hormat.

Cara Memasang Widget Contact Form Blogger di Halaman Statis

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 15 Jul 2013 19:33:00 +0700

Cara Memasang Widget Contact Form Blogger Pada Halaman Statis - Widget Contact Form Blogger ini adalah widget bawaan dari blogger dan ternyata widget ini adalah widget yang baru saja dirilis akhir - akhir ini oleh team Blogger.com.

Pada kesempatan kali ini saya akan memberikan penjelasan tentang Cara Memasang Widget ini di halaman statis, kenapa anda ingin memasang di halaman statis? iya, karena widget ini jika di pasang di sidebar tampilannya akan nggak etis sekali menurut saya.

Widget Contact Form Blogger Pada Halaman Statis.

Langkah 1: Tambahkan Widget Contact Form Blogger.
Untuk menambahkan silahkan anda masuki halaman Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Contact.

Untuk sementara biarkan widget Contact Form Blogger ini berada pada halaman sidebar anda.

Langkah 2: Tambahkan Halaman.
Untuk menambahkan halaman silahkan anda masuk ke Laman ► Laman Baru ► Laman Kosong. Copy kode dibawah ini dan paste-kan tepat di form Laman kosong anda dalam mode HTML bukan Compose.

<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30"

 type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">

*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email"

size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">

*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message"

 name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button"

 value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan atau Option, pilih Tekan "Enter" untuk baris baru.

Lalu tekan Publikasikan.

Langkah 3: Menyembunyikan Widget dari Halaman Sidebar Menggunakan CSS.
Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>.

#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus,

 #ContactForm1_contact-form-email:focus,

 #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message,

 #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Selesai, klik Save Template kemudian lihatlah hasilnya.

Sebelum menutup acara pada postingan Cara Memasang Widget Contact Form Blogger di Halaman Statis, saya sangat berterimakasih kepada Kang Ismet http://blog.kangismet.net atas tutorial - tutorial yang ia berikan sangatlah bermanfaat. Salam Hormat.

Cara Membuat Menu Navigation Melayang di Blogger

coretanputra@gmail.com (Putra Andana Purnama) — Tue, 9 Jul 2013 21:07:00 +0700

Cara Jitu Membuat Menu Navigation Melayang - Cara Membuat Floating Menu Navigation di Blog - Membuat Menu navigation melayang, tentunya anda sudah punya gambaran tentang Tutorial kali ini yang Ompaps bahas. Menu Navigation ini adalah menu yang selalu mengambang disepanjang anda menurunkan scroll tanpa ada yang berubah di menu tersebut.

Penting atau Tidak Menu Navigation di Blog?

Menu Navigation ini menurut saya lumayan bermanfaat untuk tidak merepotkan pengunjung, ketika membaca postingan sampai ke bilah yang paling bawah dan ia ingin mencari menu lainnya cukuplah menaikan cursor mouse kepada Menu Navigation yang sudah kita buat. Recommended tentang Template Blog Seo Friendly 2013.

Dimanakah Menu Navigation ini akan Muncul?

Cara Pemasangan Menu Navigation Melayang

Hal yang pertama anda harus login kedalam akun blogger, barulah anda memilih Blog yang ingin anda pasang Menu Navigation Melayang ini. Pada sisi sebalah kiri klik -> Template -> Edit HTML lalu cari kode ]]></b:skin> Jika sudah ketemu copy kode dibawah ini dan letakan persis diatas kode tadi.

/*--MyBloggerLab Sticky Navigation Bar--*/

#MBL_wrapper .MBL_social_wrapper

{

margin-top: 15px;

}

#MBL_wrapper

{

width: 100%;

margin: auto;

background: #fff;

height: 50px;

border-top: 5px solid #2c2f32;

border-bottom: 1px solid #EBEBEC;

-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

position: fixed;

z-index: 999;

}

#MBL_wrapper .topmenu.notice

{

float: left;

width: 500px;

margin-top: 15px;

color: #fff;

}

#top_menu a

{

color: #fff;

}

#top_menu

{

display: block;

float: left;

list-style: none;

margin-top: 12px;

}

#top_menu li

{

display: inline-block;

margin-right: 15px;

font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

font-size: 14px;

text-transform: uppercase;

}

#top_menu li ul

{

display: none;

}

#boxed_wrapper

{

width: 980px;

margin: auto;

}

.MBL_standard_wrapper

{

width: 960px;

margin: auto;

}

.MBL_standard_wrapper.wide

{

width: 980px;

}

.MBL_standard_wrapper.header

{

margin-bottom: 0px;

}

.MBL_social_wrapper

{

width: auto;

float: right;

}

#menuforall .MBL_social_wrapper

{

margin-top: 15px;

}

.MBL_social_wrapper ul

{

list-style: none;

}

.MBL_social_wrapper ul li

{

float: right;

margin-left: 5px;

}

.MBL_social_wrapper ul li img

{

width: 24px;

}

#MBL_menu_wrapper

{

width: 930px;

height: 50px;

padding: 0;

margin:auto;

}

.mainmenu.notice

{

float: left;

width: 600px;

padding: 17px 0 10px 12px;

z-index: 999;

}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav

{

list-style: none;

display: block;

float: left;

margin: 0 23px 0 5px;

width: 700px;

}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li

{

display: block;

float :left;

margin: 0;

}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul

{

display: none;

list-style: none;

background: #000;

position:absolute;

padding: 0;

margin-top: 51px;

width: 200px;

height: auto;

z-index: 1000;

padding-top: 5px;

border-bottom: 5px solid #000;

border-left: 0;

}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul

{

margin-left: 200px;

margin-top: 5px;

}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a

{

background: none;

}

.main_nav li ul li

{

width: 100%;

}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a

{

color: #fff;

display: block;

width: 188px;

font-weight: bold;

line-height: 1em;

padding: 10px 0 10px 12px;

background: none;

}

.main_nav ul, .main_nav

{

list-style: none;

margin: auto;

width: 600px;

height: 50px;

z-index: 999;

float: left;

border-left: 1px solid #EBEBEC;

}

.main_nav ul li, .main_nav li

{

display: block;

float :left;

margin: 0;

}

.main_nav ul li a, .main_nav li a

{

display: block;

float :left;

margin: 0 0 0 0;

padding: 18px 15px 14px 15px;

color: #2c2f32;

font-family: 'Patua One';

text-transform: uppercase;

font-size: 13px;

font-weight: 500;

border-right: 1px solid #EBEBEC;

}

.main_nav ul li ul li a, .main_nav li ul li a

{

width: 165px;

padding: 7px 19px 7px 16px;

border: 0;

font-size: 12px;

font-weight: normal;

color: #ccc;

font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

}

.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a

{

border-bottom: 0;

}

.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a

{

color: #fff;

background: #1bc4de;

}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover

{

border-right: 0;

}

.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,

{

display: block;

width: 170px;

line-height: 0.7em;

padding: 5px 0 5px 30px;

}

.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover

}

div

{

margin:0;

padding:0;

border:0;

font-weight:inherit;

font-style:inherit;

font-size:100%;

font-family:inherit;

vertical-align:baseline;

}

a

{

color: #2C2F32;

text-decoration: none;

-webkit-transition: color .2s linear, background .1s linear;

-moz-transition: color .2s linear, background .1s linear;

-ms-transition: color .2s linear, background .1s linear;

-o-transition: color .2s linear, background .1s linear;

transition: color .2s linear, background .1s linear;

}

/* Font Face ----------------------------------------------- */

@font-face {

font-family: 'Patua One';

font-style: normal;

font-weight: 400;

src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

Ketika anda sudah selesai meletakan kode diatas, carilah kode <body> dan letakan kode berikut persis dibawah kode <body>.

<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DFty8lMX7XXJYcWLM_WsG3ET7yWjG0GB2NERbA8_i0f-L6jMGEWZv1u7cNngiZsyOtqzdyGMaTD1Td_j5NP8aWuTqd1NWmjJxj1Jr75_DVOsLAc8CRUATW9Clk1C9162fpFxdV598dzv/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZYeAvIDngScstzOgZky3kYO3z_EKoui2A21WESDpCBV6YiHoV54UzR6wmkgQGTBjiYsDXA4PpebmmV__NUc21-ANX8veen6yFVlDZ2z6u9USUP1lVvUG36yIzZhi40RcaRSIbabfO7E0/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHe9O0axAKam9m1X4oYEVNxsvALBZAKUigQ7pdUT1kfVWu4w870CPWjaFoHVmXQ9kFs8hDz1w5HHbbCBm7k9JYK1RlSQzwkwTnoQY_fgCSshRYfhYAi6iZWJh6YaZhlzoszk67efejhCZK/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHNpNA4yhoK34ZkURG55s60_spkLCUYxKaff3Ov49XlOirWEmTPEhXYLnQuuKiHU_W8uiBfK3I9z2440xHNTvNLpNIonPUcgWfLtGl2welfelTA8VIiA4cHpa93NY9KgF5j_mYXpUBIB6a/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVS_kHX52My5sUiKAPr6vDVHkyhcDQ3zmMYK3PcVKlGBMGc9oi2jwln56rwmKjV6r-a17Y4iUJy-hF26tvZK_lVZgqSlhXqdxk568S5FRsl601ug1feCTZOmEQJGnwxUGqC6yaSmIZ_RrN/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTKGjyuu14qc7hW_yJK8bolFqxoCIa1EUW7Goo_2THmEUtfZpeY7bcTOj779sxaTvbObNcN5ef_XoAD2YiJZqKK8Q1_rMc1tb5Ze5ibe1QXHya6dBSB-sFxiHaoNZBY6KbbcgL0xZ74Gp/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhml5QVt1D4omvimtnNOquJVfY56wJ2CBrhVyRgE2jh5GgZAn1PvyShA08T7K6umWAzs8cg9e6pznrvJFvb6CBJ64gYcrjG1z4qI5sUwlMrUx7I10FTwyVMA32zhvHMGt4JcVYbgzTvALDt/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-iFy8of7z3xdjIr04dUVM5yuTDM2aeWyvj2UfgkZDXyrlXxTNNARNyVnRE6pd4Pw4FnPRaMJOgyqJ6Wg6w4ReGe03C3qr5z27U0ibG6sQ4-ZdDcF_AtcaumkX6POhVw4oEigMOGm2leE/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAikE8KmybWruYIFFnrinZLzbc8nfRI9C86tkt4Yki-R1XarhecZtEAx5cbhziymUmIw1BAlPOrrQsT2bzRMluTDdN99GQRXGRNzQXG8-36zSpQ9n0LwwC8Xdhf7EwElLcY9mag9kU-4mZ/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fLC5T9FWD79dr4M089vJFuGoO5fy-DbCd0i0IjdII5TXRKMnsH7223G2j9656PSg2o-08qsmkBG4v-e5NaH6xcVJjmX2Qjq-hNwQPYKKb32xKZDnbW2rFyMxfnlyxWKQHz3_VwiB7U8H/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg66ai4xwZsEzMmT0iSWME746Rs-_ri12PEfUh6YwJAyG8MJ-Jr3PvRl5W7MrVOsVMnGymnzy2yaCf1son0tfkYhe-IHDbyeO2ktN6WhqLMHlTAYBP95lO6GKQAcCVrwqKn17Gn-UfDoXwr/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>

Sebelum klik Simpan Template, tidak ada salahnya jika anda untuk me-review perubahan yang ada pada template blog anda. Jika semua tampilan mulus tak ada kendala atau pengacakan tampilan, mulailah anda klik Simpan Template.

Sekiranya begitulah tentang Cara Membuat Menu Navigation Melayang di Blogger, atas perhatian kalian saya ucapkan terimakasih dan Salam Hormat dari saya Ompaps. Jika ada pertanyaan tentang Tutorial ini, silahkan menuju halaman komentar.

Template Blog Seo Friendly Terbaru July

coretanputra@gmail.com (Putra Andana Purnama) — Tue, 9 Jul 2013 13:34:00 +0700

Template Blog Seo Friendly Terbaru July - Template Seo Friendly Ompaps Wusss ini adalah hasil dari re-desain Template Johny Wusss yang merupakan template handalan dari seorang master Template yaitu Maskolis. Entah kenapa saya selalu suka dengan kekayaan widget-widget yang ada pada template hasilnya.

Template ini benar-benar jauh berbeda dari template pada awalnya yang mempunya halaman posting terbagi menjadi 2 kolom, dan halaman sidebar yang menganut fitur show - hide. Tak habis pikir untuk saya me re-desain template Johny Wusss ini ke dalam tampilan yang bisa dibilang diatas standart tampilan Profesional. Silahkan Baca postingan saya pada Template Blog Seo Friendly.

Template Blog Seo Friendly Ompaps Wusss

Fitur Sebagai Berikut

1. Template blogger dengan tampilan elegan
2. Auto readmore
3. Loading sangat ringan dan cepat
4. Stylish threaded comment
5. SEO friendly and visitor friendly
6. Navigation menu
7. Dynamic Heading

Note: Pada kode title sidebar template diharapkan menggunakan H4, jika nanti anda kesusahan dalam mengatasi judul sidebar yang berbeda silahkan cari kode <h2><data:title/></h2> lalu ganti menjadi seperti ini <h4><data:title/></h4>. Jika ada pertanyaan seputar template ini, silahkan tinggalkan komentar anda pada postingan ini.

Untuk mengganti feedburner yang ada dibawah setiap postingan cari kode dibawah ini pada Edit HTML.

<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/BelajarSeoBlogger' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://ompaps.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BelajarSeoBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='BelajarSeoBlogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/BelajarSeoBlogger'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BelajarSeoBlogger?bg=99CCFF&fg=444444&anim=0&label=listeners' style='border:0' width='88'/></a>

Kode yang diberi background biru itu adalah ID Feedburner yang ada pada demo template, silahkan anda ganti dengan ID feedburner sendiri.

Nah segini dulu artikel tentang Template Blog Seo Friendly Terbaru July - Template ini memang sama dengan template yang saya gunakan, sedikit berbeda hanya pada menu folating saja yang tidak saya kasih di template ini. Salam Hormat.

Template Blog Seo Friendly Terbaru July 2013

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 8 Jul 2013 20:02:00 +0700

Template Blog Seo Friendly Terbaru July 2013 - Template merupakan suatu wadah dalam menampilkan semua organ - organ yang sudah dirancangnya, terlebih dalam Template ini ada ke SEO Friendly untuk mendapatkan traffick blog yang cukup diatas rata - rata.

Meski tampilan yang sederhana tanpa ada kekayaan konten dalam widget, namun dalam ilmu SEO Template ini lah yang menurut saya juaranya. Terlebih dari yang pembuat Template dengan blog Trik Mudah Seo ini hampir serupa dengan template yang saya share kali ini.

Template Blog Seo Friendly RP0513

Fitur sebagai berikut:

1. Title tag yang sudah SEO Friendly
2. Menggunakan auto meta description (Silahkan hapus bagi yang suka cara manual)
3. Dynamic heading
4. Widget header pada sidebar bisa diubah menjadi h4
5. Breadcrumbs
6. Ada tempat gadget untuk banner dan link di samping header

Bagi kalian yang ingin blognya banyak pengunjungnya dan tentunya dengan menggunakan Template Seo Friendly yang sangat ringan silahkan langsung klik link Download. Bagi ada yang kebingungan dengan template ini, silahkan langsung tanyakan ke Mas Ricky pembuat template ini dan sekaligus master Seo.

Template Blog Seo Friendly Johny Wusss

Fitur sebagai berikut:

1. Template blogger dengan tampilan elegan
2. Auto readmore tanpa javascript
3. Loading sangat ringan dan cepat
4. Stylish threaded comment
5. SEO friendly and visitor friendly
6. Sidebar toggle hide and show
7. Navigation menu dropdown
8. Slot iklan siap pasang dan masih banyak.

Template yang satu ini sangatlah rekomendasi atas dari tingkat Seo, tampilan dan juga ringan. Kalau masih bingung dengan template ini, silahkan langsung menuju halaman pembuat template ini www.maskolis.com silahkan anda tanya - tanya ke Master Template itu.

Demikianlah Artikel Template Blog Seo Friendly Terbaru July 2013 yang terdiri dari 2 Template rekomendasi dari saya untuk kalian semua. Salam Hormat.

Panduan Lengkap Meta Tag Pada Blog

coretanputra@gmail.com (Putra Andana Purnama) — Mon, 8 Jul 2013 17:18:00 +0700

Apa itu Meta Tag?

Meta tag itu terdiri dari satu set elemen yang menggambarkan isi pada web. Meta tag itu sangatlah penting untuk berbagi informasi tentang web atau blog kita dengan browser atau crawler mesin pencari. Meta tag ini sangatlah penting untuk Optimasi Mesin Pencari atau SEO untuk menarik Search Engines tentang topik dan isi pada halaman web atau blog tertentu, dan Meta tag ini dimasukkan di daerah <head> dokumen HTML.

Apa Tujuan Meta Tag?

Meta tag ini mengandung data yang terdiri dalam Meta di dokumen HTML, dan ini terdiri dari berbagai unsur yang dapat digunakan untuk menjelaskan secara detail tentang web atau blog pada halaman tertentu.

Contoh Meta Tag

Meta tag dapat kita temukan pada Template, lebih tepatnya di antara kode <head> dan </head>. Sebagai contoh lihatlah pada Tag HTML berikut.

<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>

Note: Pada Meta Tag diatas merupakan contoh dari Meta Tag Description yang mengartikan ringkasan pada halaman web atau blog, dan sedangkan Keywords ini mengartikan sebuah kata kunci yang sesuai pada isi halam web atau blog. Kedua Meta Tag diatas adalah salah satu Meta Tag yang sangat penting dalam suatu halam web atau blog.

Penjelasan Rinci Tentang Meta Tags

Tag Description adalah tag yang menampilkan ringkasan pada halaman web atau blog anda, dan Tag ini menjadi suatu bibit untuk mengoptimalkan halaman web atau blog anda di Search Engines.

Contoh Meta Description Tag

Lihat pada Tag dibawah ini.

<meta content='Your Blog Description here!' name='description'/>

Daerah konten terdiri dari informasi ringkas yang ada pada halaman web atau blog anda, sebagai contoh pengisiannya 'Blog tentang tutorial, tips dan trik seputar Blogger atau Blogspot dan Free Blogger Templates' jumlah karakter dalam pengisian ini maksimal 160 karakter.

Meta Tag Keywords

Meta Tag Keywords ini mengartikan sebuah kata kunci yang sesuai pada isi halam web atau blog. Kedua Meta Tag diatas adalah salah satu Meta Tag yang sangat penting dalam suatu halam web atau blog. Sebagai contoh lihat pada Tag dibawah ini.

<meta content='Your Keywords here!' name='keywords'/>

Daerah konten yang berfungsi untuk menemukan informasi pada halaman web atau blog anda, meta ini haruslah benar-benar memilih Kata Kunci atau Keywords yang sesuai pada isi halaman web atau blog anda. Sebagai contoh pengisiannya tentang ulasan halaman web 'Teknik Pembelajaran SEO' isilah pada Tag Keywordnya seperti 'SEO, Teknik, Panduan Lengkap SEO, Belajar SEO' Janganlah memasang Kata Kunci pada Tag ini yang berlebihan atau spam.

Meta Author Tag

Meta ini menceritakan tentang si penulis konten pada halaman, sebagai contoh lihatlah pada Tag dibawah ini.

<meta content='Author Name here!' name='Author'/>

Meta Robots Tag

Meta Robots Tag ini menganalisa tentang si Tag robot dalam mesin pencari, tag ini seakan memberi sinyal kepada si mesin pencari untuk mengindeks atau tidak kepada halaman web atau blog tertentu.

<meta content='index, follow' name='robots'/>

Note: Index itu mengikuti, sedangkan Noindex lawan artinya.

Cara Penggunaan Meta Tag - Cara Memasang Meta Tag

<head>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='index, follow' name='robots'/>
</head>

Mungkin itulah sebagai Pemandu atau Mengenal seluk beluk tentang Meta Tag, dilanjut pada postingan selanjutnya. Sebagai pendukung SEO jangan lupa pasang Sitemap atau Daftar Isi pada blog anda yak.

Cara Jitu Membuat Tombol Share di Bawah Postingan

coretanputra@gmail.com (Putra Andana Purnama) — Fri, 5 Jul 2013 22:43:00 +0700

Cara Jitu Membuat Tombol Share di Bawah Postingan - Memasang Button Share di Bawah Postingan - Mesangan Share Button di Blog - Hallo bro, malem ini gue bakalan kasih beberapa kelebihan tentang widget yang ada di dalam template blog gue, nah kali ini gue bakalan kasih widget share ini beserta cara memasangnya. Ikutin tutorial berikut bro. :)

Cara Membuat Tombol Share.

1. Login ke akun Blogger lo.
2. Klik menu tab "Template" lalu klik "Edit HTML".
3. Kemudian cari ]]></b:skin> atau supaya lebih mudak tekan tombol Ctrl + F.
4. Kalo udah ketemu, lo letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#share-button{
border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:10px 0px;width:100%;float:left;height:20px;font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 400;}
#share-button p{
float:left;
background:#fafafa;
display:block;
padding:5px 8px !important;
margin-top:-3px;
border-radius:6px 6px;}
#share-button a{
position:relative;
float:left;
border-radius:6px 6px;
display:block;
color:#fafafa;
padding:5px 8px;
margin:-3px 3px 3px;}
#share-button a:hover{
}

5. Setelah udah diletakan kode tadi, kemudian lo cari kode <data:post.body/>. Tapi kalo lo udah masang Read More otomatis di template lo, maka lo pilih <data:post.body/> yang ke-3 atau ke-4, tergantung template yang lo gunain bro.
6. Kalo udah ketemu, lo letakin deh kode dibawah ini tepat dibawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div id='share-button'>
<p>Share to</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank'>Facebook</a>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank'>Google+</a>
<a expr:href='"https://twitter.com/share?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow' style='background:#4099ff;' target='_blank'>Twitter</a>
<a expr:href='"http://digg.com/submit?url=" + data:blog.url' rel='nofollow' style='background:#000;' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>
</b:if>

7. Selesai, dan klik Simpan template. Lihatlah hasilnya bro.

Akhirnya selesai deh... Kalau masih gagal coba deh lo tinggalin komentar di postingan ini, dengan senang hati gue akan membantu.

Itulah panduan tentang Cara Jitu Membuat Tombol Share di Bawah Postingan, semoga hati senang ataupun gundah tetap bermanfaat bagi kalian. Salam hormat.

Cara Jitu Membuat Daftar Isi Blog Dengan Tampilan Keren

coretanputra@gmail.com (Putra Andana Purnama) — Fri, 5 Jul 2013 17:24:00 +0700

Cara Jitu Membuat Daftar Isi atau Sitemap Blog - Cara Memasang Daftar Isi di Blog - Cara Membuat Sitemap di Blog - Hallo kembali lagi bersama gue si OmPaps yang akan mengulas tentang Cara Membuat Daftar Isi di Blog. Lo pastinya udah tau kan arti dari Daftar Isi? kalo nggak ngerti kebangetan broh. :p

Kalau lo belum ngerti apa itu Daftar isi, coba deh lo buka buku, majalah dll. pasti dihalaman awal lo bakan dikasih tulisan Daftar Isi yang berguna untuk memudahkan kategori apa yang lo mau baca. Itulah pengertian gue tentang Daftar Isi di buku atau majalah. Sama halnya Daftar Isi di buku dan majalah, kita akan memberi halaman atau page Daftar Isi ini ke dalam blog. Gunanya untuk apa? Daftar isi di blog ini berguna untuk memudahkan pengunjung untuk memilih kategori apa yang ingin dia baca. Selebihnya pake feel sendiri deh arti dari Daftar Isi. :D

Demo

Cara Membuat Daftar Isi

CSS, HTML, JavaScript dan Cara Pemasangannya.

Untuk penempatan dartas isi Tablusai ini, lo bisa menempatkan pada postingan atapun Widget Blogspot. Kalau menurut saran gue sih mending dipasang kedalam postingan, kalau ditaro di widget kesian nanti amburadul tampilannya, karena lebar dari Daftar isi yang mau kita bikin ini lumayan buat tiduran. :D

1. Login ke akun blogger lo.

2. Setelah itu klik "New Post" baik dihalaman statis atau dihalaman yang biasa lo sering gunain buat ngeposting. Dihalaman selanjutnya akan ada dua tab disebelah kiri atas yang satu bertuliskan "Compose" sedangkan yang satunya "HTML". Nah sekarang lo klik aja yang tab "HTML" untuk pemasangan Codenya. Lihat gambar dibawah ini..

3. Selanjutnya lo copy deh code dibawah ini dan lo paste di tab HTML tadi.

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#50b7dc;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
overflow:hidden;
position:relative;
color:#fff;
border: 1px solid #2aa4cf;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 13px;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
text-transform:uppercase;
text-decoration:none;
padding:2px 12px;
cursor:pointer;
padding-top: 10px;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#2aa4cf;
color:#fff;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#2aa4cf;
color:white;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #2aa4cf;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif;
font-size: 11px;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#222;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#222;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #2aa4cf;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#50b7dc;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#EAEAEA;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#2aa4cf;
color:#fff;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#2aa4cf;
}
@media (max-width:700px) {
#tabbed-toc {
    border:2px solid #2aa4cf;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
}
#tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:#2aa4cf;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
}
#tabbed-toc .toc-content {
    border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
    display:none;
}
}
</style>

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://ompaps.blogspot.com/2013/07/Cara-Membuat-Daftar-Isi-Tampilan-Keren.html" style="display: block; font-family: 'Source Sans Pro', Arial, Helvetica, Geneva, sans-serif; font-size: 11px; font-weight: 700; margin: 9px; text-align: right; text-decoration: none;" title="Daftar Isi">Get widget</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://ompaps.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Keterangan:

1. Ganti URL yang berwarna merah dengan URL blog lo.

2. ShowDates: false ganti menjadi true jika ingin menampilkan postingan.

3. ShowSummaries: false ganti menjadi true jika ingin menampilkan deskripsi singkat postingan.

4. ShowThumbnails: false ganti menjadi true jika ingin menampilkan gambar.

5. NewTabLink: true ganti menjadi false jika ingin membuka link di tab yang sama.

6. MaxResults: 99999 adalah jumlah maksimal postingan yang ditampilkan.

Jika lo masih merasa kesulitan tentang tutorial diatas, atau lo bingung untuk mendesain ulang tampilannya. Dengan senang hati gue membantu, silahkan tinggalin komentar pada postingan ini.

Nah itu lah selagi-lagi waktu luang gue di isi untuk menulis tentang Cara Jitu Membuat Daftar Isi atau Sitemap Blog. Semoga bermanfaat buat kalian.

Cara Membuat Blog di Blogspot.com Gratis dan Mudah

coretanputra@gmail.com (Putra Andana Purnama) — Fri, 5 Jul 2013 00:17:00 +0700

Cara Membuat Blog di Blogspot.com Gratis dan Mudah - Blog bisa dikatakan serupa dengan website, namun dalam hal ini website yang berbasis blog. Blog sendiri merupakan sebuah aplikasi berbasis web yang berisi tulisan-tulisan ~~tangan jahil~~ disebuah web umum lainnya, situs web atau blog yang seperti ini biasanya dapat diakses oleh siapapun dan dimanapun anda berada akan tetapi berada didalam jaringan internet. :D

Menurut gue blog itu bisa menjadi wadah dalam segala hal, seperti halnya lo mempunyai kelebihan namun orang nggak pernah menganggap kelebihan lo ada. Contoh semisal lo punya kelebihan dalam hal menulis, desain, websiters, programmer dll. itu bisa lo share ke dalam blog lo, tanpa kita sadari hobi atau kelebihan lo itu udah banyak yang menganggap. Yah mungkin sekiranya begitulah...

Cara Membuat Blog di Blogspot.com

1. Lo harus punya akun Gmail. Lo mau nanya gunanya apa? Wey Gmail itu produk dari Google, dan si Google ini si peluncur blogspot.com. Nah jadi lo ngerti kan antara Gmail, Google dan Blogspot?
Cara membuat akun Gmail Klik disini

2. Setelah selesai bikin akun Gmail, lo lihat kesisi kanan bawah dan ubah bahasa menjadi bahasa Indonesia. Baru deh lo login dan ikutin langkah-langkah selanjutnya, nah disini lo bakalan dihadapin sama tampilan blogspot yang dibawah ini, lo klik aja Lanjutkan Ke Blogger.

3. Setelah langkah diatas selesai lo bakalan dihadepin sama tampilan yang berbeda lagi, liat aja deh gambar dibawah ini yak. :p

4. Kemudian setelah lo mengklik tombol Blog Baru, maka tampilan akan berubah seperti gambar dibawah ini.

5. Pada gambar diatas lo diwajibin tuh untuk ngisi semua form yang ada. Judul lo isi dengan judul blog lu nanti, dan Alamat lo isi dengan alamat blog lo nanti. Misalnya lo ngisi alamat tipsdantriktech.blogspot.com, nah nanti ketika lo ketik alamat blog lo di addres bar mozilla dll itu bakalan menampilkan blog lo. Yah mungkin lo paham lah. Ketika lo selesai mengklik Buat blog! lo bakalan dihadepin sama tampilan yang baru lagi, nih kaya gambar dibawah.

6. Disitu ada tulisan "blog anda telah dibuat!" nah untuk memulai tulisan perdana lo diblog, lo cukup mengklik "mulai mengeposkan", dan akan tampil wajah layar komputer lo kayak dibawah ini.

7. Nah gambar diatas itu adalah tempat dimana lo menuliskan segala apapun terserah lo, asal jangan tentang bokep yak.. Sudah tertulis rapih semuanya, dilanjut deh lo klik Publish, dengan kekuatan alam dan doa semoga tulisan lo akan dilihat banyak orang.

Selesai deh.

Nah itulah sedikit ulasan tentang Cara Membuat Blog di Blogspot.com Gratis dan Mudah Semoga tulisan yang gue buat ini bermanfaat bagi kamoh-kamoh cemuanyah... Cemungudh eaaak...

Cara Membuat Email di Gmail Gratis

coretanputra@gmail.com (Putra Andana Purnama) — Thu, 4 Jul 2013 01:03:00 +0700

Cara Membuat Email di Gmail Gratis - Jaman sekarang ini udah canggih broh, terus masih jaman nggak punya email? Nah berarti kalo nggak punya email lo nggak bakalan punya akun Facebook, Twitter dll dong?
Nggak ngerti bikin akun email di Gmail? ini deh gue bakalan kasih tutorialnya, ikutin aja langkah-langkahnya broh. :)

1. Buka Gmail.com. Jika sudah maka tampilan bakalan kaya gambar dibawah ini.

2. Kalau tampilan udah berubah kaya gambar diatas, lo klik "Buat Akun" tuh yang ada dipojok kanan atas. Ketika lo udah klik lo bakalan dibawa kehalaman yang kayak dibawah ini.

3. Tampilan udah berubah kaya gambar diatas, mulai deh lo isi form-form sesuai identitas lo, boleh ngasal kalo emang menurut lo email itu nggak berguna bagi hidup dan bangsa lo.. :p
Selesai megisi form-form barudeh lo klik "Langkah Berikutnya" maka tampilan bakalan berubah lagi kaya gambar dibawah ini.

4. Pada gambar diatas lo disuruh untuk memasukan nomer hp lo, ini gunanya untuk memverivikasi akun email yang lo buat tadi. Lo centang "Pesan Teks" Nah lo isi tuh "Nomer telepon" Jika selesai klik "Kirik kode verivikasi". Taraaaa... tampilan berubah lagi kaya gambar dibawah ini.

5. Tunggu beberapa detik atau menit, google bakalan ngirim SMS ke nomer yang tadi lo ketik untuk memverivikasi akun email lo, nah lo isi deh "Kode verivikasi" itu sama kode yang google SMS tadi. Jika selesai, klik "verivikasi". Ahoooy... tampilan berubah lagi nih kaya gambar dibawah ini.

6. Nah disini tahap terakhir bahwa akun email lo udah aktif, terserah deh lo mau klik "Tambahkan Foto Profil" atau "Langkah berikutnya". Udah jadi kan akun email di Gmail? :D

Selesai deh.

Kalo mau akun Gmail lo ini terhubung ke blogspot, klik disini cara membuat blog di blogspot.com

Mungkin itulah sedikit pembagian ilmu turun menurun dari gue tentang Cara Membuat Email di Gmail Gratis, semoga ilmu atau tulisan ini bermanfaat buat kalian cemuahhh eaak. :)

About

coretanputra@gmail.com (Putra Andana Purnama) — Sat, 7 Jul 2012 01:17:00 +0700

Putra Andana Purnama atau lebih sering dikenal Paps memulai karir bloggingnya sejak tahun 2010, ketika itu gue masih duduk dibangku sekolah. Entah bagaimana gue bisa terjerumus kedunia blogging ini, yang jelas mulai dari tahun 2010 lah bermulai atau fokus.

Hobi gue lebih mengamati tentang desain, termasuk desain blog atau website. Kalau untuk menulis itu bisa dikirakan di nomer urut yang ke-2.

Nikmatilah dalam hidup yang terbuka di dunia ini, meski hidup tak pernah menikmati akan terbukanya dunia.

Kalian bisa nemuin gue di Facebook, Twitter, Blog Pribadi. Salam Hormat.

Daftar Isi

coretanputra@gmail.com (Putra Andana Purnama) — Fri, 1 Jun 2012 14:33:00 +0700

Get widget