Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Memasang Box Info Admin Blog Di Atas Komentar

Biasanya, Box Info Admin pada blog terpasang di bawah postingan/aartikel. Namun, saya mencoba memposting ulang tapi Box Info Admin ini berada di area komentar bagian atas.

Nah, untuk demonya bisa dilihat di sini!

Ikuti langkah-langkah di bawah ini:
  1. Login di akun blogger Anda.
  2. Klik Rancangan, Edit Html dan Centang Expand Template Widget.
  3. Cari kode ]]></b:skin>
  4. Copy kode berikut di atasnya.
  5. /* Info Admin Blog */ .authorinfo {background:transparent;margin:20px 0 5px 0;padding:5px;overflow:auto;color:#000;border: 3px double #666;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;font-size:12px; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;} .authorinfo:hover {background:#666;color:#fff; border: 3px double #ccc;} .authorinfo p{margin:0;padding:0} .authorinfo a{color:#ff0000} .authorinfo img{background:#000;border: double 2px #fff;float:left;margin:0 6px 0 0;padding:6px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
  6. Selanjutnya, cari kode berikut:
  7. < div class='comments' id='comments'>
  8. Simpan kode berikut tepat di atas kode di tadi:
  9. <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorinfo'> <p> <img alt='Authorimage' class='avatar avatar-70 photo' height='50' src='https://lh5.googleusercontent.com/-XZvUlBwBa9o/TrEQIQP2qXI/AAAAAAAAADE/wUdpjeiftEA/s128/Airmata.png' width='80'/> <div style='font-family: Comic Sans MS; color: #000;'> <b><span><a expr:href='data:post.href'><data:post.title/></a></span></b></div> <div style='text-align: justify; font-family:arial'> <span>Author by : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></span><br/> <span>Tanggal: <a expr:href='data:post.href'><b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if></a></span><br/> <span>Pukul: <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></span><br/> <span>Label: <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == &quot;true&quot;'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if></b:loop></b:if></b:loop></span> </div> </p> </div> </b:if>
    Catatan: Ganti tulisan berwarna merah dengan foto yang ingin Anda pasang. Tulisan berwarna biru bisa Anda ganti sesuai dengan keinginan Anda.
  10. Simpan Template dan lihat hasilnya saat salah satu posting dibuka. Lihat di bagian atas kotak komentar blog Anda.

Sekian dan semoga bermanfaat!
Baca Lengkap....

Google Update Pagerank, Dapat 1 Peringkat

Tidak disangka-sangka kalau bulan ini ternyata google update pagerank lagi. Saya sendiri sempat terkejut melihat pagerank blog saya karena google baru saja update pagerank pada bulan oktober lalu kalau tidak salah. Beberapa teman memprediksikan jika google akan mengupdate pagerank setiap bulan. Wah, kayaknya akan bagus kalau begitu.

Awalnya saya percaya tidak percaya juga kalau pagerank blog ini naik meskipun hanya naik 1 peringkat. Tapi saya senang mengingat blog ini umurnya masih sangat muda. Setelah mencari-cari info dari mbah google, ternyata google update pagerank tanggal 10 November lalu. Bertepatan dengan hari pahlawan ya.....!!!

Bagi sobat yang belum lihat pagerank blognya, buruan cek dulu. Siapa tahu PR blog sobat naik dan semoga tidak saja yang sudah punya PR tidak turun.

Untuk cek pagerank blog sobat, silahkan klik di sini!
Baca Lengkap....

Cara terbaru Mengganti Icon Blog Address Bar

Untuk postingan kali ini, saya akan menjelaskan memberikan tips Cara terbaru Mengganti Icon Blog Address Bar. Mungkin sudah banyak yang membahas tentang ini, tapi tidak ada salahnya jika saya buat postingan ini sekedar berbagi kepada yang belum tahu. Oke, kita langsung saja ke langkah-langkahnya.

Ikuti langkah-langkah berikut:
  1. Siapkan gambar berformat apa saja (gif, jpg, ico, dll) dengan ukuran 24x42 pixel atau 32x32 pixel yang jelasnya harus berukuran kotak.
  2. Login ke http://draft.blogger.com Anda atau klik di sini!
  3. Centang box tulisan "Make Blogger in Draft my deafult".
  4. Lihat menu di sebelah kiri, lalu pilih Layout. (Lihat gambar di bawah).
  5. Tunggu sampai muncul gambar seperti di bawah ini:
  6. Klik Favicon dan upload gambar yang telah Anda buat.
  7. Terakhir klik Save Arragerement.

Sekian tips Cara terbaru Mengganti Icon Blog Address Bar. Semoga bermanfaat!
Baca Lengkap....

Membuat Search Engine Menarik dan Cantik

Selamat Bertemu Kembali. Mau cerita dulu tapi tidak punya bahan. Langsung saja ke isi tulisannya supaya tidak bosan bacanya. Oke!!!

Sebenarnya inti dari tulisan ini bukan sesuatu yang baru karena fitur ini sudah disediakan oleh pihak BLOGGER. Tapi, bagi yang ingin memiliki fitur tersebut dengan tampilan yang unik, bisa memakainya. Fitur yang saya maksudkan adalah kotak Search Engine.

Cara membuatnya seperti berikut. Untuk cara pertama ini, tinggal copy paste saja ke sidebar/widget blog Anda. Kode di bawah ini adalah kode standar. Artinya, tampilannya adalah tampilan umum (tampilan biasa saja).

Perhatikan kode berikut:

<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form>

Kode di atas akan menghasilkan seperti ini.



Agar bervariasi, bisa menambahkannya dengan latar gambar. Lihat contohnya.

<div style="border: 4px groove green; background-image: url(https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjW_tRnmI/AAAAAAAAALY/pA6d3PspvXo/385512.jpg); width: 350px; padding:15px 15px 0 15px;">
<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form></div>

Kode di atas akan menghasilkan kotak Search seperti di bawah.


Catatan: Tulisan berwarna kuning ganti dengan alamat blog Anda, sedangkan tulisan berwarna merah ganti dengan apa saja sesuai dengan keinginan Anda.

Untuk cara yang kedua, dengan memasukkan langsung ke dalam kode HTML blog Anda.

Caranya, yaitu:
  1. Login ke akun Anda.
  2. Pada halaman DASBOR, klik PENGATURAN.
  3. Klik EDIT HTML.
  4. Silahkan copy kode berikut ke tempat di mana Anda akan menyimpannya.

<form action='/search' class='cariform' method='get'>
<input class='carifield' id='q' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Sini . . . .";}' onfocus='if (this.value == "Cari Artikel di Sini . . . .") {this.value = ""}' type='text' value='Cari Artikel di Sini . . . .'/>
<input class='caributton' type='submit' value='Cari' />
</form>

Langkah selanjutnya, Anda membuat kode CSS-nya biar tampilannya menarik. Letakkan kode berikut ini di atas kode ]]></b:skin>.

/*- Pencarian -*/
.cariform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.cariform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.cariform .carifield {
background: #DBDBDB url(E:/Wallpaper/Desain Ian/bukutrans.png);
padding: 7px 6px 5px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.cariform .caributton {
color: #000;
border: solid 1px #494949;
font-size: 14px;
font-weight: bold;
height: 28px;
width: 45px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Setelah itu, simpan template Anda. Selesai dan lihat hasilnya. Demikian cara membuat kotak Search Engine pada blog. Sampai bertemu kembali pada postingan berikutnya.
Baca Lengkap....