Saturday 11 January 2014

Cara Memasang Slide Show Postingan Di Blog 116


Cara Membuat Widget Slideshow Postingan
Belakangan ini banyak teman teman saya menanyakan kepada saya .. “gimana sih cara pasang slide show postingan di blog” susah ga ? terus saya jawab ga susah kok, tinggal copy scriptnya , edit dikit abis itu save. Jadi deh...  Namun satu udah bisa, beberapa hari kemudian ada yang nanya lagi dan begitu terus hingga beberapa orang. Sehingga munculah sebuah ide untuk memposting cara membuat slideshows di postingan. Banyak yang berminat memasang widget ini setelah melihat blog saya. Karena slide tersebut memudahkan para pengunjung untuk membaca postingan apa yang menarik di blog kita. Karena di slide show tersebut bisa menampilkan gambar dari tiap postingan kita. Disertai judul dan koment yang ada di postingan tersebut. Apakah anda berminat juga untuk memasang widget ini ? caranya mudah kok,. Tidak perlu memakan waktu lama... dari pada membuang – buang waktu mari kita langsung ke TKP saja,,, lets gooo....

Cara Memasang Widget Slide Show Postingan Di Blog

  • Login ke blog anda
  • Pilih Rancangan
  • Tambah gadget
  • Pilih tambah Html / Java Script
  • Kemudian Copy kode Html Dibawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
    <script language='JavaScript'>

imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://www.BlogAnda.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div> 
<small><a href="http://permathic.blogspot.com/2012/04/cara-memasang-slide-show-postingan-di.html" target="_blank" title="Cara Memasang Slideshow Postingan Di Blog"> Widget Slideshow</a></small> 

Ingat !!! jangan lupa ubah tulisan warna merah menjadi alamat url Blog anda. Dan Editlah Width ( lebar) dan Height (tinggi) sesuai dengan yang anda inginkan. Namun jika anda tidak ingin repot2 mengubah ukuran, tinggal Copas aja. Tapi jangan lupa tulisan warna merahnya di ganti.

  • Pastekan script di atas kedalam Html/java script tadi
  • Simpan
  • Lalu atur dimana anda akan meletakan slide show tersebut
  • Lalu simpan kembali.
  • Selesai

Mudah bukan ? jangan lupa sering - sering berkunjung Ke dedeefendi88 Blog  


Cara Buat/Pasang Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot


Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat,Cara Buat / Pasang Burung Twitter Terbang Di Blog hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

  • Klik Layout > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz1gwBl4VNky6_VZ_0n5RregEI3d8_RSb5_v1u002hwARiEmtMkQpnP9TmFMv9NQtOqFTfbxxyjjXy80phj2Tieie8wrMrajDkUa0RtXYyLQbwcWaomXpZVyoawkIvgYMQJU3h-VR_ldQ/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>



  • Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
  • Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Rubah Warna Burung Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEUu8pAE0X5AlvPTKkNsYj3MANgCTRWnuODI-Z1ZjSQe9Dz5i0y0UOCtu6dmJwGd2EfxUuLjpm7wJl9M-aa-UtMWeWLMEifBlk1wcHNmhdNH4ENCcD2zuZ9jCfUD7oyWq7-TQcMv86sU/s1600/yellow+bird.png
Warna Hitam

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcofYPgrClXn3NBOZx_hbDPQ-O9axgHHs4EbLX4B9lJ1Wlgv9SV5trgslTtKgjDusGVrGe3Y4qqjXUZ_udmSlaN90iH5JkgGDLr1THTSTwzg5hvd-y4eSx90UWdUJGo-HntTmO6H943KU/s1600/black+bird.png
Warna Biru

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkNcjWAZXlq7w-PcUIkwV1SfZTrvgH5v3VWEt_kUmcwABQhuztqruspc_M4oEcDc3Bp9hn9Z-zwXF8gv_WCO784wEz7so4oBoOYVj3Qa94lnwlyWpVbkQPSFyFambrq_uadyapDHdVS8/s1600/Blue+bird.png
Warna Coklat

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNWJQOeaRBfe1Ei3H_iL3b_ksMv8k23Mpdhr37F0aBned6S29I-xfi-9odJahn6zFT76ymtUJ20hHJRcqoIznxmXXE7bUNrlvKuUD4iNsG5KaViq2nmrTFGKiKGcOpZ1lP8KiMiiNS6U/s1600/brown+bird.png
Warna Hijau

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGDzFoXj1YN4h3a_5ohHYn8R2nk6YwchN9OE4mD7ci7u0R8dJ_z90Fh1eEBjNeTYCHc9KNUdXdlAFko6f1Tol8FGO94P4wgjAnSANHDU5wwUYl4k6VicfnyEPYf0lqVLE8vgAl4MOqUs/s1600/Green+bird.png
Warna Ungu

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULRZACxQLtzOqrKThIiEp9bcB5zKeAZQ86WwLCEoJ80WiKWR2cIZqX-tzx7UWFk688HSxUjQS6U_6MCAUBZbSE6LOrpW3qU7UIQMNkmMQ0gLLiem-xdlmAIdwTPTN4KrvYxPyEf0oLAk/s1600/purple+bird.png
Warna Putih

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUDrs18F4EhAxDQmeE2lFNFfRzx2pdTZgjnXZaYZEMFNwPYtp9Rl3sfq9JWqxVMNv4Nt1TdLb-sbIZHvCvSbRF1o_psEf5pIzAD1kSl7rN-c3euibabi4YyE2CBztIYbC2Shu1Z937DQ/s1600/white+bird.png
Warna Merah

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxu2td5o0kxQUGIEsHHYcWpiLS4gk_x_YjViQO-FnRBq_9ggtBYiGjYWolU9LNwysMWsgpTBs5_-3RHTtezau7695QxhfJAMtX5LJNIIHC0YXfasi5MtT2X3CPrYBGuDRRd6bs9LCzVQE/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Friday 10 January 2014

New Blogger Label Cloud

Setelah kemarin mudik ke bandung selama dua hari nengokin si kembar yang semakin hari semakin gemesin aja, akhirnya saya balik lagi deh ke jakarta untuk mencari rezeki buat membiayai istri tercinta serta si kembar yang sudah mulai pintar jajan. Yups, tidak usah lama-lama curhatnya, ntar jadi malah garing. OK, kita kembali ke......blog tutorial tentunya. Tutorial kali ini saya ingin membahas tentang pemasangan label Cloud atau Tag Cloud pada template baru/new blogger template.

What's the meaning of Label Cloud?

Label cloud adalah pemasangan label (kategori) dalam bentuk cloud.... ( desiiig kalau gitu doang ga usah di terangin atuh... abis ga tau definisinya jadi ya asalan-asalan deh), seperti yang sobat lihat pada sidebar sebelah kanan blog ini yaitu di bawah tulisan Kategori di sana terdapat beberapa label (kategori) yang pada ujungnya tertera berapa jumlah kategori yang terpasang pada kateori tersebut. Nah itu adalah label yang umum di pakai di blogger, bila ingin sedikit yang berbeda, sobat bisa memasang label cloud. Dengan label cloud, label (kategori) akan di tulis dalam ukuran font yang berbeda sesuai dengan banyaknya kategori yang di pasang, semakin sering kategori tersebut maka semakin besar pula font nya akan tercetak.

Untuk memasang label cloud, tehnik yang saya pakai kali ini adalah buah karya dari phydeaux. Silahkan ikuti langkah-langkah berikut ini :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
  5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.
  6. Tunggu beberapa saat sampai proses selesai
  7. Simpan kode berikut di antara kode <b:skin><![CDATA[ dan kode
    ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
    ]]></b:skin>
  8. /* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}
  9. Copy paste kode berikut sesudah kode ]]></b:skin> dan sebelum kode </head> atau jika bingung simpan saja persis di atas kode </head>

    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>


  10. Cari kode berikut di dalam kode template sobat
  11. <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
  12. Ganti kode di atas dengan kode berikut ini :
  13. <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> // Don't change anything past this point -------------- // Cloud function s() ripped from del.icio.us function s(a,b,i,x){ if(a&gt;b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = &quot;<data:label.name/>&quot;; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] &lt; cloudMin){ continue; } for (var i=0;3 &gt; i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
  14. Klik tombol Simpan template
  15. Selesai.

Membuat Navbar

Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat muhhib yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.

Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.


Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

  1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :




  2. atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :



  3. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :


  4. http://favatar.myfavatar.com/amen24.png

    http://amen24.googlepages.com/TandaTangan_03.gif

  5. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :

  6. /* kode untuk navbar
    --------------------------------------- */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }
    #navbar-bawah p.info {
    float: right;
    padding-right:40px;
    line-height: 1.5;
    height: 100%;
    vertical-align: bottom;
    }
    #navbar-bawah p {
    float: left;
    margin: 0px;
    padding-top:4px;
    padding-left:40px;
    line-height: 1.2;
    vertical-align: bottom;
    }
    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;
    }

  7. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :


  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>&#160;&#160;&#169;&#160;2007&#160;|
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>



Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.

Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :

Untuk Template Klasik

  1. Sign in di blogger


  2. Klik menu Template


  3. Klik menu Edit HTML


  4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data


  5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>. atau jika bingung, simpan saja persis di atas kode </style>

  6. /* kode untuk navbar
    --------------------------------------- */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }
    #navbar-bawah p.info {
    float: right;
    padding-right:40px;
    line-height: 1.5;
    height: 100%;
    vertical-align: bottom;
    }
    #navbar-bawah p {
    float: left;
    margin: 0px;
    padding-top:4px;
    padding-left:40px;
    line-height: 1.2;
    vertical-align: bottom;
    }
    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;
    }



  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :


  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>&#160;&#160;&#169;&#160;2007&#160;|
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>


  9. Klik tombol Simpan Perubahan Template


  10. Selesai.



Untuk Template baru (new blogger template)
  1. Sign in di blogger


  2. Klik menu layout


  3. Klik menu Edit HTML


  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template


  5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>

  6. /* kode untuk navbar
    --------------------------------------- */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }
    #navbar-bawah p.info {
    float: right;
    padding-right:40px;
    line-height: 1.5;
    height: 100%;
    vertical-align: bottom;
    }
    #navbar-bawah p {
    float: left;
    margin: 0px;
    padding-top:4px;
    padding-left:40px;
    line-height: 1.2;
    vertical-align: bottom;
    }
    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;


  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :


  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>&#160;&#160;&#169;&#160;2007&#160;|
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
    &#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>


  9. Klik tombol Simpan Template


  10. Selesai.



Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger. Agar lebih cepat melihat contoh hasilnya silahkan sobat klik di sini !

Selamat mencoba !

Pasang Snaps Shots

Apakah sobat pernah mengunjungi blog yang apabila mouse menyorot link kemudian keluar screenshoot? (artikel yang aneh baru mulai sudah ada pertanyaan) , nah apabila sobat berkeinginan blognya mempunyai fasilitas seperti itu coba deh baca artikel ini sampai selesai.

Untuk mendapatkan tool screenshoot seperti itu, sobat bisa mendapankannya diberbagai situs di internet. Agar tidak berlama-lama mencari, saya ambil contoh salah satunya adalah http://www.snap.com. Berminat tapi masih bingung cara mendapatkannya? silahkan ikuti langkah-langkah berikut ini :

  1. silahkan sobat kunjungi http://www.snap.com
  2. Apabila sobat sudah berada dihalaman situs tersebut, klik tombol Get Started Now
  3. Pilih warna yang di inginkan di bawah tulisan CHOOSE A COLOR THEME, klik saja warna yang tersedia
  4. Pilih Snap shot icon dan trigger di bawah tulisan CHOOSE A SNAP SHOT AND TRIGGER, klik saja pada radio button yang ada
  5. Apabila sobat ingin memasang logo milik sendiri, klik tombol Browse...., kemudian pilih gambar icon yang tersedia pada komputer sobat, apabila tidak mau ya biarkan saja
  6. Pilih ukuran snap shots di bawah tulisan CHOOSE SNAP SHOTS SIZE, beri tanda pada radio button nya
  7. Klik tombol Continue
  8. Masukan alamat blog sobat pada kotak di bawah tulisan Enter Your Site URL. contoh : http://template-unik.blogspot.com
  9. Masukan alamat email sobat di bawah tulisan Enter Your Email
  10. Beri tanda centang pada kotak di samping tulisan I agree to the Terms and Conditions below (kalau mau dibaca, silahkan baca dulu TOS nya)
  11. Klik tombol Continue
  12. Apabila sobat memakai template baru, klik banner logo Blogger, silahkan sign in di blogger dan pilih nama blog yang di inginkan
  13. Klik tombol MENAMBAH WIDGET, maka akan secara otomatis kode dari snaps shots akan di tambahkan
  14. Pindahkan elemen yang baru di tambahkan pada tempat yang di inginkan, karena kode tersebut memuat pula banner dari snapshot
  15. Klik tombol SIMPAN
  16. Selesai.


Bagi sobat yang memakai template klasik, pada langkah yang ke 12, sobat klik lagi tombol Continue. Klik link READ MORE yang berada di bawah tulisan yang berjudul Put a Snap Shots Badge on your site. Copy kode yang di berikan dan paste pada notepad. langkah terakhir tinggal memasukannya kedalam kode template sobat.

Selamat mencoba !

Daftar Feedburner.com

Setelah kemarin yang di bicarakan adalah masalah duit, akhirnya kembali lagi deh seperti biasanya yaitu membicarakan soal blog tutorial. Artikel ini saya buat untuk memenuhi permintaan sahabat Setyo beberapa waktu yang lalu pada shoutbox, beliau meminta agar di buatkan tutorial bagaimana caranya memasang banner-banner seperti Add to Google, My Yahoo, dan lain sebagainya. Jawaban singkat dari saya adalah untuk mendapatkan semua banner tersebut (beserta fungsinya) anda harus bergabung dengan http://www.feedburner.com, apa itu http://www.feedburner.com? www.feedburner.com adalah satu situs yang memberikan layanan dalam hal syndikasi atau feed. Menurut berita yang saya baca dari halaman news miliknya feedburner, bahwa sekarang feedburner telah di akuisisi oleh google sehingga kita dapat mengalihkan feed blog kita ke feed yang dari feedburner.


Bagi anda yang ingin blognya lebih cepat terkenal saya sarankan untuk bergabung dengan feedburner, layanannya ditanggung gratis. Bagi yang ingin mendaftar tapi belum mengetahui caranya, silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan kunjungi http://www.feedburner.com.
  2. Klik tulisan Register pada halaman bagian atas
  3. Isi seluruh form yang yang ada

    • Username --> isi dengan username yang diinginkan. contoh : japra
    • password --> isi dengan password yang diinginkan. contoh : japratea
    • Password (again) --> isikan kembali password yang tadi di tulis
    • Email address --> isi dengan alamat email yang sobat miliki
    • Secret Question --> isi dengan pertanyaan rahasia yang jawabannya nanti cuma sobat yang tau. Contoh : siapa nama pacar pertamamu ?
    • Secret Answer --> isi dengan jawaban yang sesuai dengan pertanyaan di atas. Contoh : juleha
    • Klik tombol Sigin

  4. Jika berhasil, muncul ucapan selamat datang (welcome) dari feedburner
  5. Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
  6. Beri tanda pada radio buuton yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
  7. Ubah Feed Title dengan Feed Address jika mau di ubah, kalo sudah tinggal klik tombol Active Feed
  8. Ada ucapan Conrats, klik saja langsung tombol Next
  9. Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more ! have FeedBurner stats PRO also track (karena sekarang layanan yang PRO pun sudah gratis karena sudah di akuisisi oleh google)
  10. Klik tombol Next
  11. Klik tab Optimize
  12. Silahkan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada
  13. silahkan klik SmartFeed lalu klik tombol Active
  14. Klik tab Publicize, silahkan pilih fitur yang anda inginkan, tapi yang sering di gunakan adalah fitur feedCount coba klik FeedCount
  15. Pilih bentuk style dari feedcount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya
  16. Klik tombol Active
  17. Copy kode HTML yang di berikan pada text area, paste pada notepad untuk nanti di pasang di blog anda
  18. Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet seperti yang di tanyakan sahabat setyo
  19. Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi
  20. Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang sobat inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin di tambahkan lagi, klik Add kembali
  21. Klik tombol Active
  22. Klik Headline Animator untuk mendapatkan banner animasi
  23. Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan (yang paling banyak di minati adalah type classic)
  24. Klik tombol Active
  25. Klik menu dropdown di samping tulisan Add to, pilih Blogger blog
  26. Klik tombol Next
  27. Setelah muncul window baru, klik tombol Add to Blogger
  28. silahkan Sign in dulu di blogger
  29. Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan. catatan : cara ini hanya berlaku bagi yang memakai template baru
  30. Silahkan sign out dari situs tersebut
  31. Selesai



Untuk fitur-fitur yang lain lainnya, silahkan anda coba-coba saja sendiri karena jika di terangkan semuanya, saya anggap terlalu banyak. alasan utamanya sih cape ngetiknya bro .

Untuk pemasangan kode-kode HTMl yang tadi di copy pada notepad, saya anggap anda sudah bisa melakukannya, karena sudah sering saya bahas. Yang pake template klasik tinggal paste saja pada kode template nya, bagi yang pake template baru ya tinggal tambah elemen trus pilih yang HTML/Javascript, paste kodenya udah deh.

Satu yang paling terakhir. Seperti yang saya katakan diatas tadi bahwa sekarang feedburner sudah di akuisisi sama google, maka untuk feed blogger bisa di alihkan ke feedburner. Caranya seperti ini :

  1. Sig in di blogger
  2. Klik menu Pengaturan
  3. Klik Feed Situs
  4. Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh
  5. Simpan alamat feed dari feedburner pada kotak di samping tulisan posting URL Pengubahan Arah Feed. contoh alamat feed dari feed burner : http://feeds.feedburner.com/TemplateUnik
  6. Apabila anda mempunyai account google adsense, anda bisa menyimpan kode iklan google adsense anda pada kotak di samping tulisan Feed Item Footer
  7. Klik tombol Simpan Pengaturan
  8. Selesai.



Ok deh, semoga dengan bergabungnya anda ke feedburner, blog sobat menjadi cepat terkenal dan ramai di kunjungi.

Rasanya ada yang lupa nih, contoh-contoh banner yang bisa di dapatkan dari feedburner antara lain seperti di bawah ini :


blog tutorial


Add to Google Reader or Homepage



Powered by FeedBurner



Daftar Google Sitemap

Senada dengan postingan kemarin lusa yaitu agar blog kita lebih diperhatikan oleh mbah Google, salah satu caranya adalah dengan mendaftarkan blog milik anda ke Google sitemap.

Google, google, dan google lagi yang dibicarakan, ada apa dengan google? Memang tak dapat dipungkiri bahwa sebagaimana kita ketahui si mbah google ini merupakan situs yang mempunyai search engine atau mesin pencari terkenal di dunia untuk saat ini, ribuan atau bahkan jutaan website/blog bersaing memperebutkan perhatian mbah google agar situs miliknya di tempatkan pada urutan teratas pencarian. Dan tentunya apabila website/blog kita di tempatkan pada urutan teratas, niscaya website/blog kita berkesempatan di banjiri oleh pengunjung dari bebagai penjuru dunia, bukankah itu yang selama ini kita harapkan?


Dengan mendaftar ke Google sitemap maka setiap artikel yang kita posting akan secara otomatis di tangkap oleh google. Ada satu hal yang perlu di ketahui yaitu anda harus mempunyai account email di google, akan tetapi anda tidak perlu kawatir karena tak seperti waktu dulu yaitu untuk membuat email di google harus di invite oleh orang lain, sekarang sudah bisa sendiri. Bagi yang belum punya bikin dulu deh, jalan yang mudah adalah coba login di google dengan email yang di berikan untuk Blogger.com, nah nanti akan secara otomatis di suruh upgrade ama ntuh mbah google dan di suruh melengkapi formulir bikin account di google.

Agar intermezonya tidak terlalu panjang, bagi yang mau daftar Google sitemap silahkan ikuti langkah-langkah berikut ini :

  1. Login di google dengan ID GMAIL sobat, silahkan kunjungi Google sitemap
  2. Setelah berada di halaman account sobat, alihkan perhatian ke halaman sebelah atas ! di sana terdapat kotak isian di samping tombol Add Site, isilah kotak tersebut dengan alamat blog anda. Contoh : http://template-unik.blogspot.com
  3. Klik tombol Add Site
  4. Klik link Verify your site verify

  5. Klik menu dropdown yang ada, pilih metode yang di inginkan. Biar mudah pilih saja yang Add a meta tag add a meta tag

  6. Copy meta tag yang di berikan, lalu paste pada notepad atau text editor yang lainnya agar mudah di gunakan nantinya. metatag

  7. Silahkan masuk ke account blogger dan tuju blog yang di daftarkan tadi
  8. Copy paste meta tag yang di berikan tadi, sebaiknya di bawah kode <title><data:blog.pageTitle/></title> untuk template baru atau di bawah kode <title><$BlogPageTitle$></title> untuk template klasik, jangan lupa klik tombol Simpan perubahan.
  9. Bila sudah selesai, tuju kembali Goggle site map, lalu klik tombol Verify tombolverify
  10. Jika semua berjalan dengan baik, akan ada tulisan  “You've successfully verified http://NamaBlogAnda.blogspot.com/
  11. Selesai.
Bila anda mempunyai beberapa blog, anda tinggal memasukan lagi ke Add Site, ikuti seperti langkah sebelumnya.

Semoga blog anda tampak lebih menarik di mata mbah google.

Update : Tutorial ini sudah di tambahkan bantuan gambar agar lebih mudah di fahami.
Tambahan : Sekarang webmaster tool sudah terintegrasi dengan blogger, silahkan login k webmastertool dan anda akan melihat blog dalam akun gmail tersebut, untuk selanjutnya tinggal ikuti seperti langkah di atas.

Ubah Lebar Kolom Template

Lagi-lagi soal template nih. Mungkin ada beberapa dari sobat sekalian ada yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :


#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
} #main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}


Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Agar lebih faham, kode-kode diatas saya uraikan :

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.



#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila sobat memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.


#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.


#sidebar-wrapper {
width: 220px;
float: right;
}

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#newsidebar-wrapper {
width: 200px;
float: left;
}


Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.


Coba bandingkan antara dua blog ini, silahkan klik di sini ! dengan yang di sini !

Selamat berbingung ria !

Pasang Jadwal Sholat

Dari kemarin yang di omongin kayanya soal ngotak-ngatik template melulu, biar tidak jenuh kali ini saya akan membahas tentang aksesori blog. Bagi sobat yang notabene muslim, ada nih aksesori blog plus buat mengingatkan kepada kita akan waktu sholat biar para pengunjung blog kita tidak terlalu terlena ketika memmbaca berbagai artikel yang kita tulis di blog. Jadwal waktu sholat ini bisa sobat dapatkan di http://www.islamicfinder.org, untuk cara mendapatkannya silahkan ikuti langkah-langkah berikut ini :


  1. Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !
  2. Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah
  3. Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan Select a Country
  4. Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia
  5. Klik nama kota yang sobat inginkan. Contoh : Jakarta
  6. KLik tombol Generated Code
  7. Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di simpan ke blok kita
  8. Silahkan tutup window situs tersebut
  9. Selesai.



Itu tadi cara mendapatkan kode jadwal sholatnya, untuk memasukan kode tersebut ke dalam blog, silahkan ikuti langkah berikut :


Untuk Template Klasik

  1. Sign in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template, paste pada notepad lalu simpan untuk backup data
  5. Copy kode jadwal sho;at yang tadi lalu paste pada tempat yang sobat inginkan
  6. Klik tombol Pratinjau untuk melihat perubahan
  7. Bila sudah Ok, klik tombol Simpan Perubahan Template
  8. Selesai.



Untuk Template baru

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Elemen Halaman
  4. Klik tulisan Tambahkan sebuah Elemen Halaman
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
  6. Paste kode Jadwal sholat tadi ke kolom yang di sediakan
  7. Klik tombol Simpan Perubahan
  8. Pindahkan elemen yang baru di buat pada tempat yang sobat sukai
  9. Klik tombol Simpan
  10. Selesai



Contoh jadwal sholat yang saya terangkan diatas seperti ini :


Yang arah vertical :



Yang arah horizontal





Selamat mempunyai jadwal sholat dan jangan lupa sholat ye jangan ngeblog melulu !

Pelacak IP Address

Bagi sobat yang suka akan aksesori blog, ada lagi nih blog toolsekaligus sebagai aksesori blog. Tool ini berfungsi untuk melacak alamat IP (Internet Protocol) sang pengunjung blog kita. Selain IP address, tool ini juga bisa melacak browser serta Operating system yang dipakai oleh pengunjung.


Untuk mendapatkan tool ini, sobat bisa mendapatkannya di banyak situs pada internet. Agar tidak usah bingung mencari, saya ambil contoh salah satunya adalah http://www.ipnow.org. Salah satu contoh tampilan yang di miliki situs ini adalah sebagai berikut :



           



Tertarik memasang ini? Silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan buka situs http://www.ipnow.org
  2. Di bawah tulisan Custom Image ada beberapa tampilan yang bisa di pilih. Ambil contoh : klik yang Custom Graphical Info Image
  3. Pilih warna backround serta warna text yang di inginkan oleh sobat
  4. Klik tombol Create My Image
  5. Tunggu beberapa saat sampai proses selesai
  6. Copy kode yang di bawah tulisan Linked Image, paste pada notepad untuk keperluan nanti di masukan ke blog
  7. Silahkan tutup situs tersebut


Untuk cara memasukan kode yang di copy tadi, silahkan ikuti petunjuknya !

Untuk template klasik :

  1. Sign in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu untuk backup data
  5. Copy kode yang ada di notepad tadi lalu paste pada tempat yang sobat inginkan
  6. Klik tombol Pratinjau untuk melihat perubahan
  7. Jika sudah OK, klik tombol Simpan Perubahan Template
  8. Selesai.



Untuk template baru :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Elemen halaman
  4. Klik tulisan Tambah sebuah Halaman Elemen
  5. Klik tulisan TAMBAHKAN KE BLOG di bawah tulisan HTML/javascript
  6. Copy kode yang ada pada notepad, kemudian paste pada kolom yang tersedia
  7. Klik tombol SIMPAN PERUBAHAN
  8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN
  9. Selesai.

Mensubmit blog ke banyak (3000 lebih) link sekaligus



Selain mensubmit blog ke google dan beberapa search engine lain, maupun mensubmit url blog ke beberapa directory, kamu bisa menggunakan IMT Website Submitter untuk mensubmit blog kamu ke 3.000 lebih Website atau situs-situs lain sekaligus secara gratis dengan tanpa bayar.

Tujuan submit ini adalah untuk mendapatkan backlink sehingga mempercepat blog terindex google. Jenis backlink yang di peroleh adalah backlink satu arah.

Jika blog kamu adalah blog baru maka lakukan dari yang terkecil yakni limapuluh link, jangan terlalu sering melakukan submit blog ke banyak link sekaligus, tapi lakukan secara bertahap saja baik dari segi waktu misal sepekan sekali maupun dari segi pertambahan jumlah backlink 50, 250, 500 dan seterusnya.

Daripada submit satu satu lebih baik pakai ini saja,,,caranya

2. Masukkan url (alamat) website/blog kamu ke kotak yang sudah disediakan,


submit blog ke google search engine

3. Masukkan kata kunci (keyword) yang mewakili (menggambarkan) isi blog kamu, sehingga mudah di cari search engine dan usahakan pakai bahasa inggris karena website atau link link tersebut pakai bahasa inggris.

4. Pada Pilihan Limit the number of created pages, 

Bisa kamu pilih sesuai keinginan, yang jelas semakin tinggi pilihan kamu semakin lama juga prosesnya

5. Klik Submit dan tunggu hingga proses selesai (browsernya jangan ditutup)

Memang sebagian ada yang failed (gagal) tapi lumayan mungkin sekitar 95% berhasil

cara mendapatkan backlink

Selesai dalam waktu sekitar dua setengah jam (kalau kecepatan koneksi lumayan lambat mungkin sekitar empat jam)
cara submit url ke search engine

semoga blog anda cepat terindeks google, jika anda memiliki pengalaman atau tambahan silahkan di tulis dalam kotak komentar

Tips Mengubah Warna Link

Jika pada postingan yang lalu membahas tentang bagaimana cara menghilangkan garis bawah pada sebuah tulisan yang berbentuk link, maka pada kesempatan ini saya ingin mengulas tentang cara mengubah warna link. kenapa merubah warna link di perlukan? alasannya begini, pernah saya mengunjungi beberapa blog yang mempunyai latar belakang bergambar, masalahnya yaitu warna latar belakang dengan warna link hampir sama, sehingga penglihatan kita menjadi kabur dan tidak bisa membaca tulisan link. Sebenarnya kejadian tersebut tidak perlu terjadi, karena warna link dapat kita ubah sendiri. Bagi sobat yang memakai template baru, tentunya hal ini bukan masalah besar, karena fasilitas untuk merubah warna dan huruf sudah di sediakan. Lain halnya bagi sobat yang memakai template klasik, untuk merubah warna link, sobat harus sedikit berkeringat karena harus merubah kode-kode yang ada pada kode template sobat. Kode-kode yang manakah yang harus ubah? Untuk mengubah warna link, setiap template tentunya berbeda-beda, Akan tetapi untuk gambaran saja saya ambil contoh di dalam template ada kode seperti ini : a:link { color:#3333FF; text-decoration:underline; } a:hover { color:#000066; text-decoration:underline; } a:visited { color:#663366; text-decoration:underline; } Agar menjadi faham, akan saya uraikan : a:link { color:#3333FF; text-decoration:underline; } kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah. a:hover { color:#000066; text-decoration:underline; } Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah. a:visited { color:#663366; text-decoration:underline; } Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna ungu dan bergaris bawah. Pertanyaan selanjutnya manakah kode diatas yang menentukan warna link? jawabnya adalah kode : color:#3333FF; Tulisan yang saya cetak merah adalah penentu warna atau di sebut juga dengan kode warna heksa, kode tersebutlah yang menentukan warna sebuah link. Bagaimana cara merubahnya? caranya tentu saja kita harus mengganti kode warna tersebut dengan kode warna yang kita inginkan. untuk mencari tau kode heksa dari warna, saya biasanya menggunakan bantuan dari program photoshop, disana telah disediakan contoh warna lengkap dengan kode heksa nya, kita tinggal memilih warna yang diinginkan kemudian secara otomatis akan di perlihatkan kode heksanya. Masih bingung? kalau masih bingung soal warna, sobat kunjungi deh blognya bang iwan di link ini http://free-7.blogspot.com, ada juga di bagian Side bar blog beliau di tuliskan berbagai kode heksa. Saran dari saya, apabila sobat menggunakan warna latar belakang yang terang, maka pilihlah warna link yang gelap. Sebaliknya, apabila warna latar belakang berwarna gelap, maka warna link haruslah berwarna terang. Selamat mencoba !