Halaman Navigasin Ala Google

•  Silahkan login terlebih dahulu pada blog anda

• Anda klik Edit HTML

• sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget  

 

• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard)

1. Cari kode di bawah ini

]]></b:skin>

Setelah ketemu silahkan letak kan kode di bawah ini di atas tag ]]></b:skin>

#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}
td.showpageOf{display:none;}
#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}
#nav a{display:block; text-decoration:none; color: #0066FF}
#nav a:hover{ text-decoration:underline;}
#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; 

font-weight:bold}
.cur{ font-weight:bold;}
.csb{background:url(http://www.google.com/images/nav_logo7.png)

no-repeat 0 0;height:26px;display:block;}
.csb.cur{background-position: -44px 0pt; width: 16px;}
.csb.movenext{color:#20c;background-position: -76px 0pt; 

margin-right: 42px; width: 66px;}
.csb.moveprev{color:#20c;background-position: 0pt 0pt; 

margin-left: 42px; width: 44px;}
.csb.ch{background-position: -60px 0pt; width: 16px;}
#nav td{padding:0;text-align:center}

2. Cari kode di bawah ini :

</body>

Setelah ketemu silahkan letak kan kode di bawah ini di atas tag </body>

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;

<script src='http://accordion-template.googlecode.com/svn/trunk/

jsnavigoogle-packer.js' type='text/javascript'></script>

3.Cari kode di bawah ini

'data:label.url'

Setelah ketemu silahkan hapus kode 'data:label.url' ganti dengan kode di bawah ini

'data:label.url + "?&max-results=7"'

4. selesai dan simpan templete

Sumber : http://web.gallerydunia.com

»»  READMORE...

Membuat Related Post dengan gambar berjalan pada blogger

Kira-kira bingung ga dengan maksud judul di atas?saya juga bingung gimana mau ngasih judul nya..mungkin kalau mau di sederhakan bahasa nya kira-kira kayak gini :

"Membuat artikel terkait  dalam bentuk gambar yang berjalan bolak- balik yang diletakan persis  di bawah postingan"

 

Gimana sudah di lihat..??? nah jika sobat berminat mari kita belajar membuat nya...

1. Tahap PERTAMA

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
• Anda klik Edit HTML
• sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget
• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal

Cari Kode di bawah ini..

</head>

Jika sudah ketemu hapus dan ganti kode di bawah ini :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

2. Tahap KEDUA

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

CATATAN : jika di templete blog sobat tidak di temukan kode yang berwarna merah maka cari kode yang berwarna biru,yang penting salah satu nya aja yang di gunakan untuk modifikasi.

Sudah Ketemu...copypaste  semua kode di bawah ini dan letakan di bawah kode  <div class='post-footer-line post-footer-line-1'>  jangan salah tempat ya.... di bawah

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Hasil nya kayak gini

<div class='post-footer-line post-footer-line-1'>
<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=10;

var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

CATATAN :

• Kode yang saya cetak tebal berwarna biru ..var maxresults=10; maksud nya gambar thumnail yang di tampilkan bisa 10,11 atau jumlah lain nya yang sobat inginkan.

3.Tahap KETIGA simpan templete

Sekarang Coba anda lihat hasil nya...semoga berhasil..


Sumber : http://web.gallerydunia.com

»»  READMORE...

Cara berkreasi menganti Tulisan Postingan Baru dan Postingan Lama

Nah,,kali ini saya mencoba mengobok-obok kode html untuk menghiasi dan menyisipkan gambar pada tulisan Postingan lama dan Postingan Baru...

Kalau di bawaan templete blogger di bawah postingan atau artikel akan terlihat tulisan Postingan lebih baru,Beranda dan Postingan lama gimana ya kalo kita ubah tulisan tersebut ?? pasti akan lebih menarik jika kita ganti tulisan nya dengan icon gambar seperti terlihat pada contoh gambar di atas yang saya ambil gambar screen shot nya di salah satu blog saya..

Ok..jika sobat berminat langsung aja yuk ke TKP...

1.Silahkan Login terlebih dahulu.

2. Lalu klik Templete lalu klik Edit templete dan centang Expand Widget Templates yang terlihat seperti gambar di bawah ini.

Gambar draf baru blogger

3.CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard)

Kode yang perlu di cari sesuaikan dengan yang di bawah ini

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Catatan :

• <data:newerPageTitle/> @ Sama dengan tulisan Postingan baru bisa anda ganti tulisan atau gambar seperti contoh : seperti tulisan Data Baru,Artikel Baru dll.

• <data:olderPageTitle/> @ Sama dengan Tulisan Postingan lama bisa juga anda ganti dengan tulisan atau gambar sesuka anda bisa dengan tulisan  artikel lama,Data lama dll.

• <data:homeMsg/> @ Kode ini bisa anda ganti dengan tulisan atau gambar seperti tulisan  Halaman Utama ,Beranda dll.

• Tag kode yang saya tandai warna merah di atas bisa di sisipkan dengan gambar agar terlihat lebih cantik dan menarik untuk sekedar contoh bisa anda ganti tulisan nya dengan gambar di bawah ini :

Kode nya : 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW38Y60ke-kTMamHKL0sPNhaNOCko_kb1AspjZE9KARvSFFKTBVF1P3DNm4YmnbJp6CiN5nVxKXOCnnsnAjl1FFOshkw1aw2NJBjC4xebDUpv66iu87jHwcmp1DIv5MJKt-_zDy546dRKn/s1600/beranda+2.png'/>

Kode nya: 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEB5sbC8-4Ejee9-HC5v2eMNO_kb2XbJnsPG_QeQlloxkMjhy4_MI6ZUvzejLNZiyxDuykqPxefK7rKo5FxGVUcI9yyjzjgAjnVo4fUcZqdJnMaDccwUPbt2o42sUDg2ANO-iSP0p50BnO/s1600/data+Baru+2.png'/>


Kode nya :
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGpn8wGwtX2FPbK4lbOhMV7k61K19PHOBi9r0Q5kMS_xTNRNJ-Ffix5CnighbOzshAzhanPRU_3JMdstBzH6TCJnW8-m0F18xlI94-jFAzaAeFONHvlkXvkFYJ2bd23ICUwgOdR87lslM/s1600/data+lama+2.png'/>

4.Simpan Templete dan lihat hasil nya

Akhir nya selesai juga neh artikel..semoga artikel sederhana ini bisa menghias blog kita lebih cantik lagi...dan di tunggu variasi lain nya dari para sobat di kotak komentar..semoga bermanfaat.


Sumber : http://web.gallerydunia.com/2011/07/cara-berkreasi-menganti-tulisan.html

»»  READMORE...