pasang iklan baris gratis
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Cara Membuat Page Number Navigation (1,2,3...)

Create Post by. BlogLowker

Bagai Mana Cara Membuat Page Number Navigation Seperti gambar di atas.
Disini saya Membagi ilmu dengan sesama Blogger..
Pertama Login ke Blogger anda..
Setelah itu Masuk ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:
]]></b:skin>
Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:
.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;
}

Lalu,cari lagi kode seperti ini:

</body>

Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

 Langkah terakhir,carilah kode berikut:

'data:label.url'

Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:

'data:label.url + &quot;?&amp;max-results=5&quot;'     

Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang.

0 comments

Labels: ,

Membuat Tab View Pada Halaman Blog

Create Post by. BlogLowker
Berikut langkah-langkahnya :

1. Login ke blogger dengan ID anda

2. Lalu Klik Menu Templates

3. Klik Sub Menu Edit HTML

4. Pada Kotak Edit HTML cari Kode ]]></b:skin>

5. Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>
Code :
/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;} 

6.Lalu letakkan kode berikut dibawah kode <head>
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/> 


7.Pergi ke halaman Element Halaman

8.Klik Add Widget Element

9.Pilih Menu HTML/Java Script

10.Lalu Copy kode berikut
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>


SELAMAT MENCOBA.

0 comments

Labels: ,

Ranking Alexa Melorot Karena Jarang Update

Create Post by. BlogLowker
Blog jarang Update atau jarang posting ternyata berpengaruh terhadap ranking alexa dan terjadi penurunan ranking. sejak dahulu apa yang di katakan para sobat blogger mengenai Ranking Alexa dimana intensitas Update merupakan salah satu faktor tinggi dan rendahnya traffic pengunjung mungkin sahabat blogger sudah mengerti maksud saya di atas, lalu kita selalu bertanya. 

Mengapa Demikian..?

Traffic pengunjung atau Ranking Alexa Menurun..pastinya kita akan merasa kurang puas dengan penurunan tersebut. apa lagi kita berharap banyak sedangkan kita jarang menambah postingan pada blog kita..atau istilah lain kita jarang update blog.

Secara Teknis Penurunan traffic pengunjung/rank alexa yang disebabkan karena jarangnya update blog Kembali lagi ke dasar masalah yaitu : SEO (Search Engine Optimization) atau mesin pencari,seperti yang kita ketahui sebelumnya kunci keberhasilan blog untuk urusan traffic salah satunya adalah bagaimana blog kita disenangi oleh Search Engine. Bagaimana caranya??

1. Update : buatlah artikel blog secara teratur dan bermanfaat untuk pengunjung blog maupun bagi Search Engine, usahakan jangan ada yang salah ketik karena akan mempengaruhi Score SEO.
2. Backlink/ Tautan Balik: usahakan submit dan manfaatkan (Blog direktori, facebook, blog dummy, forum) setiap kali update dengan cara yang wajar.
3. Artikel Unik dan Menarik: Kita tau sedari dulu bahwasanya search engine seperti Google paling suka dengan judul serta isi posting unik atau jarang pernah ada dari sebelumnya.

0 comments

Labels: , , , , , ,

Membuat Spoiler Pada Blog

Create Post by. BlogLowker
Mungkin anda pada sering lihat Spoiler seperti berikut di forum-forum seperti KASKUS dan lain lain.

Judul Isi Spoiler

isi Yang akan anda spoiler...


Apa Anda Bingung Bagai Mana Cara Membuatnya..??
Baiklah kalau begitu...
kita mulai saja belajar bagai mana sebenarnya cara membuat Spoiler di Blog..
Pertama-tama kita harus mengerti dahulu apa maksud dari Spoiler tersebut..
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten Blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain Spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca Blog untuk membuka atau tidak isi Spoiler.

Ok.. Kita langsung saja merakitnya jika anda sudah paham maksud dari Spoiler.
Berikut Code yang bisa digunakan dalam membuat Spoiler di Blog :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul atau isi konten </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi dari spoiler atau Konten anda
</div></div></div></div>
Semoga Berhasil dan Bisa Bermanfaat bagi anda pecinta Blogger..

0 comments

Labels: , , ,

Membuat Readmore Otomatis Pada Blog

Create Post by. BlogLowker
Pembahasan kita kali ini ialah Cara Membuat Readmore atau Baca Selengkapnya pada Blog.
yang tujuannya ialah untuk megurangi halama pemakaian pada Blog.
Bacaan ReadMore atau Baca Selengkapnya akan muncul di Blog. anda untuk mengurangi tampilan postingan anda di halaman utama Blog anda.

Berbagai macam trik untuk membuat Readmore atau Baca selengkapnya mulai dari cara manual dan otmatis. Tapi kali ini saya akan membagi ilmu dengan anda dengan cara Otomatis.
Baiklah, mungkin anda akan mulai bosan dengan ocehan saya. Sebaiknya mari kita mulai.


1.Login Blog Anda.
Silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda centang atau ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

Cari Code </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://facebooks-vacancy.blogspot.com/2011/02/membuat-readmore-otomatis-pada-blog_16.html' type='text/javascript'/>
2. Cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p> 
Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
Keterangan :
Tulisan yang berwarna Hijau adalah Bacaan Untuk Melanjutkan isi postingan anda..
anda bisa mengganti tulisan dengan keinginan anda sendiri..
Boleh dengan Kata READMORE.. SELENGKAPNYA.. dll

=>>Summary noimg 430 = tinggi artikel terpenggal tanpa image
=>> Summar img 430 = tinggi artikel terpenggal dengan image
=>> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.

3. klik save template

0 comments

Labels: , , ,

Cara Membuat Blog

Create Post by. BlogLowker
Tutorial Cara Pasang dan Hapus Widget Blog di Blogspot
Buat Sahabat Blogger, baiklah mari kita belajar..
Terlebih dahulu kita akan bahas Cara Menambah/Pasang Widget di Sidebar Blogspot, sebagai berikut:

1. Login dahulu ke Account Blogspot Anda, selanjutnya akan tampil halaman seperti pada gambar di bawah ini:
2. Klik Rancangan/Design, lalu akan tampil halaman berikutnya seperti pada gambar di bawah ini:
3. Klik Tambah/Add Gadget, kemudian tampil lagi halaman baru seperti pada gambar di bawah ini:

4. Cari dan pilih HTML/JavaScript, lalu akan terbuka halaman baru seperti pada gambar di bawah ini:

5. Tulis Judul (wajib) pada kotak Judul/Title, lalu masukkan teks/kode yang ingin tampil di sidebar blog Anda ke dalam kotak Konten/Content. Jika Anda tidak ingin judul widget muncul di sidebar blog Anda, silahkan baca tutorial Cara Menyembunyikan Judul Widget di Blogspot ini;

6. Klik Simpan/Save, selesai.

7. Setelah selesai, apabila Anda ingin mengatur posisi widget berada pada tempat yang Anda inginkan, letakkan crusor mouse pada kotak judul widget lalu tekan dan geser ke posisi yang Anda inginkan, kemudian klik tulisan Simpan/Save yang terletak di pojok kiri atas pada halaman tersebut.

Dan Bagai Mana cara Menghapus Widget.?
Baiklah Mari Kita bahas..
Adapun Cara Menghapus Widget di Sidebar Blogspot adalah sebagai berikut:

1. Seperti biasa Login ke Blogspot, lalu klik Rancangan/Design dan setelah muncul halaman seperti gambar di bawah ini:

2. Cari judul widget yang akan dihapus, lalu klik pada tulisan Edit dan akan terbuka halaman baru seperti contoh gambar di bawah ini:


3. Selanjut klik pada tulisan Hapus/Delete;

4.Klik OK, selesai.

Demikianlah tutorial sederhana tentang Cara Pasang dan Hapus Widget Blog di Blogspot ini.

Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah

Beberapa waktu lalu saya berkunjung ke beberapa blog yang telah berkunjung ke Blog Serba Tersedia ini, maksudnya sih untuk membalas kunjungan mereka, namun ketika saya hendak meninggalkan pesan di kotak komentar blog mereka koq tidak bisa, masalahnya ruang untuk memasukkan Word Verification-nya tidak ada, contohnya seperti gambar di bawah ini:

Dalam hati saya terbersit rasa keinginan untuk memecahkan masalah tersebut, ya hitung-hitung bila suatu saat saya memodifikasi kotak komentar dan mengalami masalah seperti itu, saya sudah tau cara memperbaikinya.

Dengan berbekal rasa penasaran kemudian saya googling dengan mengetikkan kata kunci Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, akhirnya saya dibawa ke blognya kang Zons di http://www.inimu.com. Setelah saya baca tutorialnya ternyata cocok dengan permasalahan di atas.

Nah di bawah ini adalah Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, silahkan ikuti langkah-langkahnya dengan benar, sebagai berikut:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find (Ctrl + F) untuk memudahkan pencarian kode;
2. Sebelumnya Download Template Lengkap dulu untuk jaga-jaga jika terjadi kegagalan, lalu cari kode tag di bawah ini:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

3. Perbaiki atribut scrolling pada tag tersebut, karena disinilah akar permasalahannya. Ada dua cara untuk memperbaikinya, silahkan pilih salah satu saja yaitu: 1. Hapus atribut scrolling='no' pada tag tersebut; atau:
2. Ganti atribut itu menjadi scrolling='auto', ini bertujuan untuk menampilkan scrollbar di samping form komentar bila form komentar melebihi area yang tersedia.
4.Setelah dilakukan perubahan, Save Template.

Tampilan form komentar Anda nantinya akan dilengkapi dengan scrollbar seperti pada gambar di bawah ini:

Anda juga boleh (tapi tidak harus) mengubah value atribut height menjadi 410px. Tujuannya untuk mempertinggi area form komentar sesuai dengan yang ada pada template standar Blogger.

Demikianlah tutorial tentang Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah ini, semoga bermanfaat.

0 comments

Labels: , ,