2 Cara Membuat Menu Blog Keren

Menu Blog Keren

Tutorial Belajar Blog | Tips Blog - Cara Membuat Menu Blog Keren ,  Mungkin Anda Berfikir Menu Blog Keren Seperti apa ?

Berikut ini langkah-langkahnya :
1. Masuk ke akun Blogger Anda.
2. Klik Tata Letak.
3. Klik Tambah Gadget.
4. Pilih HTML/JavaScript.
     Lalu copy kan script dibwah ini pada HTML/javascript

<script language="JavaScript1.2" src="http://oktri.googlecode.com/files/slide%20menu%20keren.js"></script>
<script>
resizereinit=true;
menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'left',
kviewtype:'fixed',
barbgcolor:"#00ff00",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,
menuItems:[
["Home", "tutorialbelajarblogger.blogspot.com", "_self"],
["My Facebook", "http://www.facebook.com/oktri.darmadi",""],
["Berita", "http://www.okezone.com/", ""],
["Kaskus", "http://www.kaskus.us", ""],
["My Profile", "http://www.blogger.com/profile/02713061222000849084", ""],
["Panduan Blog", "http://tutorialbelajarblogger.blogspot.com", ""],
["Tips And Trics Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Belajar Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Tips Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry
]};
make_menus();
</script>

Keterangan :

• Ganti Direct Link "http://oktri.googlecode.com/files/slide%20menu%20keren.js" dengan Direct Link File JS anda sendiri, sebab script tersebut bisa over load jika terlalu banyak yg menggunakan, anda bisa download script JS nya.
• Ganti link dan judul link yang saya tulis dengan warna merah dan Biru dengan link Anda sendiri.
• Ganti Tulisan left yang saya tulis dengan warna Coklat dengan rightjika anda ingin Side Menu ini muncul disebelah kanan body blog.

9. Selanjutnya jangan lupa untuk mengklik tombol Simpan.
10. Selesai...

Semoga Bermanfaat

0 Cara Membuat Menu Tab View

Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

1 Cara Membuat Kontes SEO Yang Baik

Banyak peserta berlomba lomba mendapatkan peringkat tertinggi / terbaik dalam SERP mesin pencari seperti Google, Bing, Yandex, ataupun yang lainnya agar dapat menjadi pemenang diakhir kontes tersebut serta dapat membawa pulang hadiah yang telah dijanjikan pihak penyelenggara bagi sang pemenang.

Dalam membuat sebuah kontes SEO sebaiknya membuat dengan dedikasi tinggi (masuk akal) dan tidak alakadarnya, seperti : Antara hadiah dan peraturan seimbang, kosa kata dalam artikel kontes, dll.

Membuat kontes SEO yang baik sangat penting bagi perkembangan / kelajuan kontes yang kita buat untuk kedepannya, jika antara peraturan dan hadiah tidak ada keseimbangan (peraturan terlalu berat dan hadiah tidak pas) tentu peserta kontes yang sobat buat tidak akan banyak.

Disini saya akan memberikan beberapa tips untuk sobat yang sedang berencana membuat sebuah ajang SEO dan masih bimbang cara membuat lomba SEO yang benar, berikut pembahasannya :


#1 - Kata Kunci Yang Di Perlombakan.

Pemilihan kata kunci yang tepat harus selalu kita perhatikan, jika memilih keyword yang salah bisa saja kita tidak akan mendapatkan hasil positif dari sebuah kontes yang telah kita buat. Kata kunci yang diperlombakan harus sesuai topic blog / artikel yang akan direview oleh peserta kontes SEO, sebagai contoh :

Saya membuat sebuah kontes seo dan peserta kontes seo wajib mereview tentang blog anime saya. Lalu saya memilih kata kunci : Tempat Download Anime Bahasa Indonesia ? Inasub Aja untuk persaingan kontes yang saya buat.

Selain sesuai tema blog yang akan direview, disini saya menyarankan bahwa dalam menentukan kata kunci lomba sebaiknya membuat long tail keyword. Tujuannya untuk mempermudah peserta dalam bersaing dan memperkaya kata kunci blog sobat.

#2 - Waktu, Peraturan & Hadiah.

Waktu sangat berkaitaan erat dengan peraturan dan hadiah kontes, tentu sangat tidak baik jika kita membuat kontes SEO yang waktunya sangat lama dan hadiah hanya pulsa 5 ribu ALL Operator. Dari itu perlu diperhatikan sekali lagi, yang membuat kontes seo sobat tidak laku (peserta sedikit) adalah karena tidak adanya keseimbangan antara waktu / peraturan dan hadiah.

Disini saya menyarankan hadiah lebih berat (dalam jumlah yang cukup banyak) dari pada peraturan yang telah sobat tetapkan dalam ajang yang telah dibuat, karena rata rata masyarakat Indonesia mata duitan. Untuk peraturan, gunakan peraturan yang tidak terlalu berat atau ringan agar banyak yang berminat untuk mencoba mengikuti kontes seo yang sobat buat.

#3 - Pemilihan Kosa - Kata Pada Artikel Kontes SEO.

Dengan menulis pemberitahuan kontes SEO sobat dengan membuat artikel baru, jangan sekedar copas artikel kontes seo lain. Buatlah artikel pemberitahuan kontes SEO dengan kosa - kata yang menunjukkan bahwa sobat Berwibawa, Berkharisma, dan Menunjukkan bahwa kontes SEO sobat tidak SCAM.

Dalam menulis artikel pemberitahuan kontes sobat, sebaiknya kata sebisa mungkin jangan sampai berulang ulang, contoh : Kontes SEO = Ajang SEO = Lomba SEO. Gunakan kata kata yang berbeda tetapi mempunyai makna yang sama

0 Membuat Link Profesional Untuk Blogger

Dalam membuat atau membangun link dalam SEO khususnya blogger kita sering dihadapkan pada masalah tampilan. Lihatlah wikipedia.com yang mempunyai link profesional yang unik pula. Dimana artikel atau kata yang terkait akan diikuti gambar. Kita bisa membuat link unik tersebut sama dengan yang digunakan wikipedia di blogger. Sayangnya blogger tidak mempunyai plugin untuk menambah gambar pada link tersebut secara otomatis. Nah untuk membuat link profesional untuk blogger ini kita bisa sisipkan gambar di setiap link yang kita buat. Berikut ini contohnya :

Demo

Intinya adalah kita menambah CSS ringan yang dapat menggenerate semua link internal di blog kita.
Cari kode berikut :
]]></b:skin>
Hapus dan ganti dengan kode di bawah ini :

.post-body a.external {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFcosJKhkPkCdNsGlBUJ7ygloWR2DyQ69ajDfLHkrNAJa38o1UuuB81GaENjzYVhyphenhyphen-9LDyz5ozgm268fN0wdcNXbhkUi4yQ2ocb176Lj3Pflz-jcWZh8l5zxBUoKIQcYxNz4woQCIAmP1/s1600/link-external.png) no-repeat right center;
 padding-right: 16px; /*Jarak untuk penepatan icon external*/
 color:#61380B; /*warna link external*/
 text-decoration: none;
}
.post-body a.external:hover {
 /*kode untuk hover link external*/
 color: #FF8000; /*warna hover link external*/
 text-decoration: underline; /*garis bawah link external*/
}
]]></b:skin>

Kemudian simpan template sahabat dan jangan lupa mengedit setiap link dengan format seperti berikut :
<a class="external" href="http://sejutatrik.blogspot.com/" title='demo'>Demo</a>

Nah seperti itulah pembuatan link profesional khususnya link internal di blogger. Dengan fungsi yang bermanfaat untuk SEO Blog kita maka sudah seharusnya link di blog kita edit dan tampilkan secara profesional bukan? semoga artikel ini bermanfaat.

0 Cara Membuat Efek Banjir di Blog

Halo Sobat blogger kembali lagi bersama Blog Trik dan Tips. Sobat sudah pernah belum ngalamin rasanya banjir ditempat sobat tinggal. Banjir pasti sangat menggangu aktivitas yang sobat ingin lakukan. Namun kali ini, blog trik dan tips akan membahas cara membuat efek banjir di blog. Ingin tau caranya, langsung saja ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. Pilih HTML/Javascript 
5. Masukan kode berikut ini:

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>

6. Simpan gadjet

Sekarang sobat sudah bisa melihat hasilnya. Efek ini akan membuat blog anda tenggelam akibat banjir. Akan muncul ikan dan gelembung udara di blog anda. Selamat mancoba..

0 Cara Mudah Mengganti Favicon Blogger Tanpa Mengedit HTML

Panggantian favicon yang akan saya jelaskan disini tanpa melalui editing HTML, melainkan langsung dari fitur yang dimiliki blogger. Tak usah belama-lama, langsung akan saya jelaskan caranya secara lengkap, silakan disima

1. Masuk halaman Blogger in Draft, silakan login dengan akun blogger sobat
2. Di halaman utama terdapat daftar blog sobat, silakan klik Dashboard pada blog yang akan diedit faviconnya
   
   
   
   
   
3. Kemudian klik Edit pada elemen Favicon Setting yang terletak diatas elamen navbar
   
   
   
   
   
4. Akan muncul window baru, yaitu window favicon configuration
   
   
   
   
5. Silakan sobat pilih file icon yang ingin dipasang, gunakan file dengan ekstensi .ico karena file yang support adalah file icon .ico . Bagi sobat blogger ingin mengkonversi file JPG, PNG atau file lain ke .ICO dapat sobat lakukan di http://www.icoconverter.com/ atau situs konversi lainnya
   
   
   
6. Setelah itu klik Save untuk menyimpan setting yang telah dilakukan
   
   
   
   
   
7. Selesai, coba sobat buka blognya, dan favicon sudah berubah susai yang diganti tad

Semoga Artikel ini bermanfaat...

0 Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Semoga bermanfaat

0 Tampilan Baru Editor HTML Template Blogger

Google baru baru ini mengumumkan bahwa mereka telah membuat beberapa penyesuaian untuk editor HTML template blogger. Jika anda melihat pada bagian editor template blogger, maka anda akan menemukan bahwa sekarang fitur tersebut mendukung line numbering, syntax highlighting. auto-indentation dan code folding.

Dalam postingan di blog Blogger Buzz, seorang insinyur perangkat lunak Google yaitu Samantha Schaffer dan Renee Kwang mengetengahkan tutorial cara memindahkan tanggal posting blog dari yang awalnya berada diatas posting menjadi dibawah posting sebagai contoh cara mengedit template pada editor template baru blogger.

Jika anda ingin pula turut mencobanya, silahkan ikuti langkah-langkah cara memindahkan tanggal posting blog sebagai berikut:

• Klik tab template pada dasbor blogger, klik tombol edit HTML untuk melihat editor HTML template baru anda 

• Kemudian cari widget "Blog 1" dengan cara cepat langsung ke widget drop down:

• Widget ini mengontrol bagaimana postingan blog anda akan ditampilkan, kode dalam widget ini tersembunyi atau dilipat untuk menampilkannya klik tanda panah kecil  '►' disamping line numbering

• Di dalam tag includable block kode yang membuat tanggal posting:

• Potong bagian kode tanggal posting seperti diatas dan pindahkan ketempat yang kita inginkan, sebagai contoh dibawah judul posting

• Untuk melihat perubahan klik tombol preview template.

Demikian tampilan editor HTML template blogger yang baru serta sebuah contoh cara mengedit template yang bisa saya uraikan kali ini.

Jika kita perbandingkan dengan versi lama maka opsi dari Expand template widget tergantikan dengan adanya tombol format template, dan code folding yang dapat menjadikan anda jauh lebih mudah dalam mengedit template.

Adapun untuk mencari teks gunakan 'Ctrl + F' dan untuk mengganti teks kode satu persatu, setelah anda mengklik pada editor gunakan 'Ctrl + Shift + F dan untuk mengganti semua kode sekaligus gunakan 'Ctrl + Shift + R'. Silahkan dicoba biar lebih mengerti. Perubahan ini menuntut kita untuk beradaptasi kembali dan bagi kami yang mengetengahkan tutorial harus update menyesuaikan dengan perubahan yang ada. Bagaimana menurut anda dengan perubahan ini?

Referensi: Blog Blogger Buzz

0 Tutorial Medaftarkan Sitemap Blog Ke Google

Menambahkan sitemap ke google adalah salah satu cara terbaik dari webmaster karena katakanlah bahwa kita memiliki sebuah blog dan kita tidak mutlak memastikan bahwa semua halaman web kita akan terindeks oleh google karena berbagai alasan, sehingga membiarkan kita tahu untuk bot google "hei, di sini saya punya semua halaman dan telah anda diindeks halaman saya ".Karena tidak ada cara automative bahwa kita diri kita dapat membuat sitemap untuk blogger cara terbaik itu kita dapat menambahkan sitemap adalah melalui google alat wabmasters

Pasti semua duah tahu caranya. Berikut ini tutorial yang bisa anda lakuka karena langkah langkahnya sangat mudah :

1. anda harus punya akun gmail tentunya. kemudian buka webmaster

2. kemudian jika anda sudah masuk, klik add site 

3. maka akan muncul seperti gambar berikut ini :

isi URL situs anda. jika sudah klik continue.

4.setelah anda isi URL situs anda,maka situs anda sudah didaftarkan di webmaster google.

0 Promosikan Blog Anda Ke Blogupp,Gratis

Ada beberapa cara bagaimana anda dapat mempromosikan blog anda dan menarik traffic ke blog anda. Salah satu cara untuk menarik traffic adalah Blogupp. Bloggupp bekerja seperti pertukaran banner dengan situs lain yang menggunakan situs dengan widget untuk menghasilkan traffic. Blogupp bekerja dengan menambahkan potongan kode yang disediakan oleh Blogupp dan ini bekerja dengan tampil blog lain di blog anda, dengan cara yang sama blog anda akan muncul di blog lain. Oleh karena itu bekerja seperti pertukaran banner dengan blog lain beberapa yang dipilih secara acak.

Berikut ini langkah langkah mudahnya :

1. masuk ke blogupp kemudian isi URL blog anda dan tekan Get Widget.

2. tunggulah sebentar untuk loading mengecek blog anda. jika sudah maka akan muncul seperti di bawah ini.

3. ada beberapa pilihan,anda bisa mencopy langsung kodenya atau klik Add to Blogger. anda bisa share di facebook,twitter. selain itu juga anda bisa mengatur tampilan blogupp anda.

4. jika semua langkah sudah dilakukan,maka contoh tampilannya akan seperti ini dan selesai :

0 Browser paling cepat dan ringan

Masih cari-cari browser yang super cepat dan paling ringan? wah kebetulan donk soalnya saya sudah menemukannya meski pada awalnya ini dari ketidak sengajaan. sama seperti rekan-rekan semua pada awalnya saya suka incar browser di internet waktu itu yang sering jadi bahan pembicaraan ada 3 browser diantaranya ; Chrome, Firefox dan Opera.
Awal cerita seperti ini, laptop yang saya gunakan Acer Aspire 5741 pemberian dari adik tercinta di Jepang (yang lagi magang gitu). Biasalah yang namanya ABG semua aplikasi di instal dan didownload sampai-sampai cache dan history laptop ketika waktu dibersihkan mencapai 10 Giga (koneksi di jepang gila-gilaan bro). Nah efek dari banyak aplikasi yang di instal menyebabkan kinerja laptop ikut terganggu, alhasil laptop sering down dan hank hingga saya memutuskan untuk format tuh laptop, saya coba instal OS nya menggunakan Win 8.

0 Tips Menaikan Page Rank Di Blog

hallo All, Salam Blogger Dari Gwe Jhony Bangun...Hehe :)

ok deh, langsung saja pada intinya..

Kali ini gua pengen sering sedikit nih tentang, Cara menaikan page rank di Blog.

Buat Agan - Agan yang sudah paham pasti sudah tahu Tentunya, jadi ini hanya sedikit tips dari gua untuk temen blogger yang masi Pemula.

Berikut ini cara gua, menaikan page rank suatu Blog.

1.Tulislah Artikel/konten Menurut Blog sobat.

2.Serajin -rajinya Bertukar Link dengan sahabat Blogger yang Lain.

3.Hubungkanlah Link Artikel ke link artikel lain Blogsobat.

4.jangan sering Menggonta - ganti template Blog sobat.

5.rajin Berkomentar Di blog yang dofollow

6.menjadikan Template anda Seo.

7.lakukanlah update artikel secara Teratur

8.buatlah Artikel Sobat Sendiri, agar lebih baik di mata om Google dan Ibu Alexa.com..Hehe

9.daftarkanlah blog sobat ke situs sperti , lintasme, infogue.com, Bing

10.Jangan Lupa Dilike artikel ini yah..Hehehe :p

penulis->jhony Bangun

0 Pakai Lumia 920, Microsoft Ledek Galaxy S III

Mana yang lebih cepat dalam mencari restoran Meksiko, Samsung Galaxy S III dengan OS Android atau Nokia Lumia 920 dengan OS Windows Phone? 

Menurut salah satu iklan video terbaru yang dirilis oleh Microsoft, jawabannya adalah Lumia 920. 

Iklan menampilkan Ben Rudolph, pegawai Microsoft yang berkeliling dan mengadu kecepatan pencarian Lumia 920 miliknya dengan Galaxy S III milik beberapa orang lain.

Secara tidak mengejutkan, Lumia 920 muncul sebagai pemenang berkat fitur "Local Scout" yang dibawa oleh sistem operasi Windows Phone 8.

Iklan ini adalah bagian dari kampanye promosi "Meet Your Match" yang tujuannya memberi tahu konsumen bahwa Windows Phone adalah pilihan yang "lebih baik, lebih mudah, lebih berguna, dan lebih menyenangkan".

Untuk menunjukkan hal itu, Microsoft menyajikan komparasi langsung antara perangkat Windows Phone dengan perangkat berbasis OS lain.

Sebelum ini, pada 2012, Microsoft pernah menjalankan kampanye serupa berjudul "Smoked by Windows Phone".

Sumber -> kompas.com