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