Cara Membuat Widget Penerjemah Dari Google

Hallo sobat ada yang sudah punya Widget Penerjemah Dari Google belum nich. kalau belum mari kita bahas dan kita pelajari di sini. Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini. Baiklah langsung saja
kita mulai cara membuatnya ya sobat. Di sini saya akan memberikan 3 (macam) atau pilihan. Silahkan sobat pilih sendiri ya.

Ikuti langkah-langkah berikut ini sobat :

1.    Masuk menu Layout kemudian masuk menu Page Elements
2.    Pilih box layout yang diinginkan kemudian klik Add a gadgets
3.    Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini :

a.    Vertikal

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :







b.    Horizontal


<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true,
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :






c.    Tarik-turun saja


<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :







4.    Kalau sudah di save saja ya sobat.

Semoga berhasil dan sukses ya sobat
readmore »»  

Cara Menampilkan Status G-Talk (Google Talk) Pada Blog Kita

Hallo sobat, siapa yang punya email gmail hayoo yang dipakai buat ngeblog. Di sini saya akan berbagi informasi tentang Cara Menampilkan Status G-Talk (Google Talk) Pada Blog Kita. Ya mudah dan sulitnya tergantung sobat semua memahami penjelasan ini hehehehe. Fungsi dari ini yaitu pengunjung bisa melihat admin sedang online atau offline. Jadi kalaupun admin sedang online maka pengunjung dapat chatting langsung atau tanya-tanya  sama admin dari blog atau web yang sobat baca sekarang. Oke langsung saja kita mulai pembahasannnya ya sobat.
Ikuti saja langkah berikut ini ya sobat :

1. Buka situsnya Google yang ini (di sini) ya sobat.
2. Kemudian Log In dengan Account Google kamu sobat.
3. Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..
4. Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate codenya kedalamnya ya sobat.

Selain cara pemasangan saya akan menerangkan sedikit cara mengubah tampilanya sobat. Untuk mengedit bentuk dari widgetnya klik mengedit ya

Gambarnya seperti ini sobat :













Catatan :

*   Title (optional) : Untuk meberi judul widget keseluruhan (dikosongi jika ingin menampilkan nickname)
*   Your nickname : Nickname yang kamu tampilkan di widget
*   Style : Bentuk dari widget bisa kamu udah dengan selera kamu sendiri
*   Jika ingin mengubah panjang dan lebar tinggal cari code w=200 (untuk lebar) dan h=60 (untuk tinggi) silahkan ubah sesuai keinginan kamu

5.   Setelah semua udah di set klik tombol Update Badge ya sobat
6.   Lalu code dibawahnya kamu masukkan ke blog kamu

Semoga berhasil dan sukses ya sobat

readmore »»  

Cara Membuat Horizontal Drop Down Menu Pada Blogspot

Horizontal Drop Down Menu, apa ya itu. Buat teman-teman yg belum tau apa itu menu dropdown, menu drop down ini adalah menu navigasi yang akan menampilkan sub menu di bawahnya secara otomatis apabila disorot oleh mouse. Sebenarnya banyak cara yang bisa dipakai untuk membuat menu drop down, dan salah-satu cara yang saya pakai adalah ya di bawah ini. Mungkin untuk melihat hasilnya seperti apa langsung saja kita praktekin saja caranya ya sobat.

Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit sebaiknya template punya sobat diedit terlebih dahulu ya.
2.   Login ke blogger dulu sobat ya.
3.   Klik tata letak.
4.   Klik sunting HTML.
5.   Contreng Expand Template Widget.
6.   Cari kode ]]></b:skin>, kemudian letakkan kode berikut sebelum kode ]]></b:skin>

Jqueryslidemenu {.
font: 12px tebal Trebuchet MS; background: # 414141; width: 100%;} ul {jqueryslidemenu. margin: 0; padding: 0; daftar-style-type: none;} / * daftar item tingkat Atas * / . jqueryslidemenu ul li { position: relative; display: inline; float: left;} / * Tingkat Top menu item link yang gaya * / ul li jqueryslidemenu a {. display: block; background: # 414141; / * background tab (default negara) * / warna: putih; padding: 8px 10px; perbatasan-kanan: 1px solid # 778; color: # 2d2b2b; text-decoration: none;} . * html ul li a jqueryslidemenu {/ * IE6 hack untuk mendapatkan sub menu link untuk berperilaku secara benar * / display: inline-block;} . jqueryslidemenu ul li a: link, ul li jqueryslidemenu a: visited {. warna: putih;} ul li jqueryslidemenu a: hover {. latar belakang: hitam; / * link tab latar belakang selama negara hover * / warna: putih;} / * 1 tingkat sub menu * / ul li ul jqueryslidemenu {. position: absolute; left: 0; display: block; visibility: hidden;} / * item menu tingkat Sub daftar ( membatalkan gaya dari Daftar Barang tingkat Atas) * / ul li ul jqueryslidemenu li. { display: list-item; float: none;} / * Semua tingkat sub menu berikutnya offset vertikal setelah 1 tingkat sub menu * / . jqueryslidemenu ul li ul li ul {top: 0;} / * Sub level menu link style * / ul li ul jqueryslidemenu li a {. font: 13px Verdana normal; width: 160px; / * lebar sub menu * / padding: 5px; margin: 0; border-top-width: 0; perbatasan-bottom: 1px kelabu;} . jqueryslidemenuz ul li ul li a: hover {/ * hover * sub menu gaya / background: # eff9ff; warna: hitam;} / * CSS kelas diterapkan gambar panah bawah dan kanan * / . downarrowclass { position: absolute; top: 12px; kanan: 7px;} . rightarrowclass { position: absolute; top: 6px; kanan: 5px;}

7.   Kemudian letakkan kode berikut sebelum kode </ head>

<!--[ If IE 7 LTE]>
<style type="text/css">
html jqueryslidemenu {height: 1%;} / * Holly Hack untuk IE7 dan di bawah * /.
</ style>
<[endif]! -> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src = 'http: / 'type =' / h1.ripway.com/anshul555/slidemenu_horiz.js text / javascript '/>

8.   Cari kode seperti ini yang mirip

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b: widget id = 'Header1' dikunci = 'true' title '= Judul Blog Sobat(Header) 'type =' Header '/>
</ b: section>
</ div>

Catatan : Untuk tulisan yang berwarna orange ganti dengan judul blog sobat

9.   Kemudian letakkan kode berikut tepat antara kode </ b: section> dan </ div>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li> <a href='http://namablogsobat.blogspot.com'> Depan </ a> </ li>
<li> <a href='#'> Daftar Isi </ a> </ li>
<li> <a href='#'>Menu </ a>
<ul>
<li> <a href='#'> Menu 1.1 < / a> </ li>
<li> <a href='#'> Menu 1.2 </ a> </ li>
<li> <a href='#'> Menu 1.3 </ a> </ li >
</ ul>
</ li>
<li> <a href='#'> Menu </ a> </ li>
<li> <a href='#'> Menu </ a>
<ul>
< li> <a href='#'>Menu 2.1 </ a> </ li>
<li> <a href='#'> Menu 2.1 </ a>
<ul>
<li> <a href='# '>Menu 2.1.1 </ a> </ li>
<li> <a href='#'> Menu 2.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1 </ a>
<ul>
<li> <a href='#'> Menu 3.1.1.1 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.3 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.4 < / a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu 2.1.4 </ a> </ li>
</ ul>
</ li>
</ ul >
</ li>
<li> <a href='#'> Menu </ a> </ li>
</ ul>
<br style='clear: left'/>
< / div>

Catatan :

*   Untuk text yang berwarna hijau silahkan sobat ganti dengan URL atau alamat link yang sobat mau
*   Untuk taxt yang berwarna orange silahkan sobat ganti dengan nama atau judul sesuai dengan keinginan sobat juga.

10.   Jangan langsung disimpan tapi dipreview dulu ya sobat, dan lihat hasilnya.

Semoga berhasil dan sukses ya sobat
readmore »»  

Cara Membuat Menu Vertikal Pada Blogspot

Baiklah sobat kita berbagi ilmu lagi sobat. Kali ini mari kita membahas soal Cara Membuat Menu Vertikal Pada Blogspot. Dah tau belum apa itu menu vertikal. Yach hampir sama sich seperti perbahasan kita kemarin tentang Cara Membuat Menu Horisontal Pada Blogspot. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar secara vertikal. Gak usah berlama lama ya. Ayo langsung saja sobat.

Ikuti cara berikut ini :

1.   Sebelum memulai mengedit jangan lupa disimpan dulu ya template punya sobat.
2.   Login ke blogger trus pilih "Layout-->Edit HTML"
3.   Masukkan kode berikut sebelum kode ]]></b:skin> atau </style> sebelum kode. Pokoknya ditaruh di dalam Barisan kode CSS aja yach.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}


* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Catatan :

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1 dan blue2). Ganti kode tersebut dengan pilihan warna green1 dan green2 atau red1 dan red2 sobat.

4.   Kemudian di save.
5.   Lalu pergi ke menu "Page Elements"
6.   Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya.

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://menu1.com">Menu1</a></li>
<li><a href="http://menu2.com">Menu2</a></li>
<li><a href="http://menu3.com">Menu3</a></li>
<li><a href="http://menu4.com">Menu4</a></li>
</li>
</ul>

Catatan :

Kode yang berwarna orange adalah linknya dan yg warna hijau adalah teks yang ditampilkan. Silahkan Ubah sesuai dengan keinginan sobat.

7.   Save dan lihat hasilnya ya sobat.

Moga berhasil dan bermanfaat ya.
readmore »»  

Cara Membuat Menu Horisontal Pada Blogspot

Hallo sobat, apa kabar nich hari ini semua. Oke kali ini kita akan membahas tentang Cara Membuat Menu Horisontal Pada Blogspot. Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu. Langsung saja ya sobat percantik blog kamu dengan menu horisontal ini.

Begini caranya sobat :

1.    Sebelum memulai mengedit lebih baik sobat simpan dulu template punya sobat, biar aman saja.
2.    Login ke account blogger kamu.
3.    Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
4.    Cari kode ]]></b:skin>  dan Copy-Paste kode berikut di atasnya.

/* navbar
================== */


#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}


#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}


#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}


#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}


#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}


#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}


#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}


#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

*    Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan orange.
*    Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
*    Untuk kode pewarnaan, kamu bisa melihatnya di kode warna di sini.

5.   Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>


... dan seterusnya ...


</b:section>
</div>

6.    Copy dan paste kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>


<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>


<div id='navright'>


<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>


</div>


</div><!-- akhir bg_nav -->

Catatan :

*    Untuk yang berwarna orange dan hijau ganti dengan apa yang sobat mau.

7.   Jangan lupa di priview dulu sebelum di simpen ya sobat dan lihat hasilnya

Semoga bermanfaat dan sukses ya sobat.
readmore »»  

Cara Membuat Navigasi Next and Back Pada Halaman Blog

Hallo sobat negeri semua, kali ini saya akan berbagi ilmu tentang Cara Membuat Navigasi Next and Back Pada Halaman Blog. Tau kan pada saat blog muncul pada halaman pertama, nah di ditu biasanya muncul tulisan di bawah postingan. Nah kali ini akan kita ganti dengan tulisan Back, 1, 2, 3,....Next. Bagaimana cara membuat Tombol Next pada halaman, seperti yang pernah kita lihat ada beberapa Web /Blog yang memakai cara ini tapi tidak semua dapat memakainya ada yang tidak bisa muncul tombol nextnya.
baik kita mulai pembahasan kita. langsung saja ya ikuti cara berikut ya :
1.    Login dulu ke blog anda
2.    Pilih Tata Letak, klik HTML/Java Script
3.    Kemudian copy code dibawah ini

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


</style>








<script type="text/javascript">


function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';




var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';


for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){


itemCount++;
}


}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}


for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}


fFlag++;
}


if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}


if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){


if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}


html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;


if(thisNum<(postNum-1)){
html += downPageHtml;


}


if(postNum==1) postNum++;
html += '</div>';


if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");


if(postNum <= 2){
html ='';
}


for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&&pageArea.length>0){
html ='';
}


if(blogPager){
blogPager.innerHTML = html;
}
}


}
</script>


<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Contoh hasilnya kayak gini sobat :


4.   Save dan lihat hasilnya sobat

Semoga bermanfaat ya
readmore »»  

Cara membuat Daftar Isi Keseluruhan atau Sitemap

Jumpa kembali sobat, mari kita bahas soal lain lagi yaitu Cara membuat Daftar Isi keseluruhan atau Sitemap. Jadi sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. Kali ini saudara blogger kita Om Abu-farhan punya solusinya yaitu "The Best Table of Contents (TOC) or Sitemap for Blogger". Untuk contohnya sobat bisa langsung saja lihat punya saya yang ada di pojok paling bawah. Baiklah langsung saja kita kasih tau caranya sobat :

1. Langkah pertama masuk blogger.com
2. Pada menu Dashboard klik menu "Design - > Page Elements"
3. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"
4. Dan taruh script dibawah ini kedalamnya.

<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">
</script>
<script src="http://namablogkamu/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Atau pakai script ini sobat :

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://namablogkamu.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Catatan :
*   Untuk tulisan yang berwarna orange "http://namablogkamu/"ganti dengan nama blog kamu sobat

5.   Simpan dan lihat hasilnya sobat

Semoga berhasil dan sukses ya


readmore »»  

Membuat Gambar Melayang Di Pojok

Hallo sobat negeri semua, apayang akan kita bahas hari ini. Mari kita mencoba ngebahas gimana cara membuat gambar yang berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar " itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. taugak maksud saya. Itu lho contoh whos.amung.us yang saya pasng di bawah sebelah kiri. Oke langsung saja menuju saja ya sobat.


Ikuti langkah berikut ini :

Cara Pertama :

1.  Login ke blogger trus klik "Layout -->> Edit HTML
2.  Cari kode ini ]]></b:skin>  kalau dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3.  Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4.    Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok">
<a href="http://ceriwis-boplo.blogspot.com">
<img src="http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" border="0" /></a>
</div>

Catatan :

*  "http://ceriwis-boplo.blogspot.com" adalah link. ganti dengan link kamu.
*  "http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5.   Simpan dan lihat hasilnya sobat.

Semoga berhasil ya
readmore »»  

Cara Membuat Recent Coment Pada Blog

Pembahasan kita kali ini adalah Cara Membuat Recent Coment Pada Blog menggunakan java script sobat. Sudah membayangkan belom kira-kira seperti apa bentuknya. Coba dech lihat recent coment punya saya itu. nah seperti itulah sobat. menarik bukan. Oke sobat gak perlu berlama-lamalah ya ntar jadi bosen lagi.

Langsung saja ikuti cara berikut :

1. Pada menu Dashboard klik menu "Design - > Page Elements"
2. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"
3. Dan taruh script dibawah ini kedalamnya, terserah dech mau diberi judul apaan.
scriptnya sebagai berikut :

<script style="text/javascript" src="http://www.belajarngeblog.com/script/showrecentcomments.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

4. Ganti namabloganda dengan nama blog anda sendiri.
5. Klik Save dan lihat hasilnya.

Moga bermanfaat dan berhasil ya sobat




readmore »»  

Cara Membuat Recent Post Berjalan Pada Blog

Halllo sobat negeri semua, hari ini enaknya kita bahas soal apa ya. Gimana kalo membahas soal Cara Membuat Recent Post Berjalan Pada Blog. Seperti yang sobat lihat di blog saya ini, menarik bukan. Tentu saja ini ada cara ngebuatnya. Gimana kalo langsung menuju ke tempat sasaran sobat negeri.

Cara ngebuatnya begini sobat :

1. Pada menu Dashboard klik menu "Design - > Page Elements"
2. Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"
3. Dan taruh script dibawah ini kedalamnya.


<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{
sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
}
else
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}


if( nScrollDelay)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if(sDirection)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "top" || sDirection =="bottom")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "��";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
sPostURL = objPost.link[nCounter].href;
break;
}
}


sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}
//]]>
</script>


<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 200; var sDirection="top"; var sOpenLinkLocation="Y"; var sBulletChar=">>**<<"; </script> <script style="text/javascript" src="http://ceriwis-boplo.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

Catatan :

*   Ganti kode yang berwarna Hijau dengan alamat blog sobat.
*   Var nMaxPosts = 20 adalah jumlah postingan terakhir.
*   Var nScrollDelay = 200 adalah kecepatan text.
*   Var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan "right" jika ingin text tersebut berjalan dari kiri ke kanan.
*   Var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
*   Var sBulletChar=">>**<<" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

4.   Save dan lihat hasilnya.

Semoga sukses ya sobat
readmore »»