Tutorial Nano Yulianto - Kreatif Blogger Tutorial, Tips Trik Menghias Blog

Blogger Berbenah Diri

2013-04-13T22:10:00.000+07:00

Home > Update Status > Blogger Berbenah Diri

Tampaknya sejak hak kepemilikkan Blogger ditangan Google, sering terjadi perbaikan untuk meningkatkan kualitasnya. Atau Blogger sudah berada diposisi yang tidak aman, karena banyak kompetitornya yang perlahan menusuk.

Improvements to the Blogger template HTML editor

Kegunaan Tag <pre> di Blog

2012-12-28T00:37:00.001+07:00

Artikel ini pertanyaan dari sahabat saya "Rifafa - rifafa.blogspot.com".

Sebelumnya saya jelaskan lagi. Tag <pre> mendefinisikan untuk teks terformat atau seperti ini :

<pre>
Nano Yulianto
N
  a      Y
    n       u
      o        l
                 i
                   a
                     n
                       t
                         o
</pre>

Nano Yulianto
N
  a      Y
    n       u
      o        l
                 i
                   a
                     n
                       t
                         o

Yang dimaksud teks terformat adalah akan memunculkan teks seperti yang anda ketik, seperti adanya spasi yang berlebihan atau dll.

Kegunaan tag <pre>?

Selama ini saya melihat tag <pre> digunakan untuk menulis kode seperti CSS, HTML, Javascript, dll.

Contoh :

body {
  background: white;
  color: black;
}

kode diatas :

<pre>
body {
  background: white;
  color: black;
}
</pre>

Tapi menurut saya, jika menulis kode CSS dll, tag <pre> dan tag <code>.

<pre>
<code>body {
  background: white;
  color: black;
}
</code>
</pre>

Bagaimana tag <pre> agar terlihat menarik?

Berikut adalah kode dan gaya tampilan tag <pre> yang biasa digunakan :

pre{
background:#FEFEEC;
padding:15px;
color:#444444;
}

pre{
background:#FEFEEC;
padding:15px;
color:#444444;
}

Semoga Bermanfaat

Mengganti Gambar Slide Show Template Mdev

2012-12-12T02:09:00.000+07:00

Sebelumnya, anda harus mengetahui apa itu URL Gambar.

Saya sarankan setiap langkah tutorialnya, langsung dipraktekkan.

Masuk ke : Template > Edit HTML > Proceed

Cari Kode: <div class='panel'>

Disana ada beberapa kode <div class='panel'>.

Satu bagian kode <div class='panel'> hanya untuk satu gambar.

Didalam <div class='panel'> kode untuk URL, contoh :

<a href='http://nanoyulianto.blogspot.com/2011/03/update-template-n2y-sedikit-mirip.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcQozHrHYshcSSW3KCQ_XMe0W4hJrzcQirv6sIs7KBcqbLPzEbiJGcnaudBIgAgH4mWNt83oF-hTRInouGdfmlxEznMl30MgD267EmZIGwNAUMNp5dO7ZW5DrGOdvuMwlI9ust8oEHs4B/s400/nanoyulianto.blogspot.com+-+N2y+Sedikit+Mirip+Google+Nav.png'/></a>

Agar terlihat mudah, anda bisa merapikan kode tersebut seperti :

<a href='http://nanoyulianto.blogspot.com/2011/03/update-template-n2y-sedikit-mirip.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcQozHrHYshcSSW3KCQ_XMe0W4hJrzcQirv6sIs7KBcqbLPzEbiJGcnaudBIgAgH4mWNt83oF-hTRInouGdfmlxEznMl30MgD267EmZIGwNAUMNp5dO7ZW5DrGOdvuMwlI9ust8oEHs4B/s400/nanoyulianto.blogspot.com+-+N2y+Sedikit+Mirip+Google+Nav.png'/>
</a>

Berwarna merah untuk URL halaman yang anda inginkan.

Berwarna biru untuk URL Gambar.

Ganti dengan URL anda

Jika ingin hanya gambar saja yang muncul, bisa dihapus tag <a>.

<a href='http://nanoyulianto.blogspot.com/2011/03/update-template-n2y-sedikit-mirip.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcQozHrHYshcSSW3KCQ_XMe0W4hJrzcQirv6sIs7KBcqbLPzEbiJGcnaudBIgAgH4mWNt83oF-hTRInouGdfmlxEznMl30MgD267EmZIGwNAUMNp5dO7ZW5DrGOdvuMwlI9ust8oEHs4B/s400/nanoyulianto.blogspot.com+-+N2y+Sedikit+Mirip+Google+Nav.png'/>
</a>

Kode berwarna merah dihapus, terlihat seperti ini :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcQozHrHYshcSSW3KCQ_XMe0W4hJrzcQirv6sIs7KBcqbLPzEbiJGcnaudBIgAgH4mWNt83oF-hTRInouGdfmlxEznMl30MgD267EmZIGwNAUMNp5dO7ZW5DrGOdvuMwlI9ust8oEHs4B/s400/nanoyulianto.blogspot.com+-+N2y+Sedikit+Mirip+Google+Nav.png'/>

Jika anda sudah mengganti dengan URL anda, pastikan untuk Preview Template, apakah terjadi Error atau tidak.

Dan terakhir Save.

Jika tidak berhasil, silahkan bertanya dengan berkomentar.

Malu bertanya, susah dan derita anda sendiri.

Home > Blogger > Template > Mdev > Mengganti Gambar Slide Show Template Mdev

14 Jurus Menghias Kotak Untuk Menulis Komentar Blog

2012-12-08T20:04:00.000+07:00

Kali ini Blog Nano Yulianto Akan berbagi cara menghias atau sedikit memberikan efek pada kotak untuk menulis komentar.

Penempatan Kode

Template >> Edit HTML >> Proceed

Penempatan kode berada di :

<b:skin><![CDATA[

Letakkan Kode disini

]]></b:skin>

Atau :

Ketik Ctrl+f dan masukkan kode :

<b:skin><![CDATA[

Letakkan kode di bawahnya <b:skin><![CDATA[

Kasus Lain

Jika ada kode "/*" disamping <b:skin><![CDATA[

Di Enter, turunkan kebawah :

Dan sekarang bisa letakkan kode dibawah <b:skin><![CDATA[

Pilih Gaya dan Kode

Untuk referensi :

Background bergambar

Macam-Macam Warna

Gaya 1

Akan terlihat transparan dan jika disentuh dengan mouse akan kembali normal.

Kode

.blogger-iframe-colorize{
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}

Gaya 2

Masih sama dengan gaya pertama, yang berbeda ini menggunakan warna background.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}

Kode berwarna merah adalah kode untuk warna background. Anda bisa ganti sesuai selera.

Gaya 3

Ini membuat kotak komentar berganti warna jika disentuh dengan mouse.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
transition: background 2s;
-moz-transition: background 2s;
-webkit-transition: background 2s;
-o-transition: background 2s;
}
.blogger-iframe-colorize:hover{
background:#ffff00;
}

Kode warna merah untuk warna background, bisa diganti. Kode warna Atas untuk belum disentuh, dan bawah saat disentuh.

Gaya 4

Ini membuat kotak komentar melengkung dan disentuh kembali normal

Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.

Gaya 5

Ini membuat kotak komentar melengkung dengan unik.

Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px 0 200px 0;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.

Gaya 6

Ini bergaya MDev Template yaitu miring.

Kode

.blogger-iframe-colorize{
background:#242729;
color:#E6E3BB;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}

Kode berwarna merah untuk background, dan berwarna biru untuk warna teks. Untuk pengguna Template MDev langsung pakai saja tanpa merubah, tapi terserah anda.