Oto Website

Tema Vanila untuk Postingan Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGI7JZC6IZkQvmA2IOmzSAuKad4WJvE9CVjLarKLebTHQEEpWV6_nj1eg6m8wr07EVa67orBIJEAa8vJT4LdksoAw2BKrx8UtCf2OrvkwcN-kk_WcFnsaz3NAy6vm7Yk5j45iINHg4g/s1600/Tema+Vanila+-+OW.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGI7JZC6IZkQvmA2IOmzSAuKad4WJvE9CVjLarKLebTHQEEpWV6_nj1eg6m8wr07EVa67orBIJEAa8vJT4LdksoAw2BKrx8UtCf2OrvkwcN-kk_WcFnsaz3NAy6vm7Yk5j45iINHg4g/s1600/Tema+Vanila+-+OW.png" /></a></div>
Mempercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ini <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Oto Website</a> akan berbagi cara tentang mempercantik blog dengan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="">Tema Vanila untuk Postingan Blogger</a>. 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a> adalah tema atau background yang berguna untuk mempercantik artikel Anda, seperti memberi tema pada tag <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">HTML</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">CSS</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JavaScript</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">JQuery</a>, <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">PHP</a>, dan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">XML</a>. 
Tema Vanila biasa juga di sebut dengan Tag PRE karna penggunaanya kita harus menyisipkan Tag PRE di antara Tag yang ingin kita bungkus dengan Tema Vanila. 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Fitur Tema Vanila untuk Postingan Blogger:</a> 
 
<ul>
<li>Memiliki Header atau title yang berbeda-beda.</li>
<li>Tema Vanila memiliki enam background standar yang berbeda.</li>
</ul>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/Demo%20Tema%20Vanila.html" target="_blank">Lihat Demo</a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat Tema Vanila untuk Postingan Blogger</div>
 
Untuk cara penginstalan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a> dan cara menggunakannya sangatlah mudah, kita hanya perlu menanamkan tag CSS pada template dan memanggil tema ini dengan tag pre sesuai dengan jenisnya. 
Disini <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> akan menjelaskan tentang cara menginstalnya pada blogger. Untuk blogger silahkan ikuti langkah berikut: 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Cara Menginstal Tema Vanila untuk Postingan Blogger</a> 
<hr color="#0071bb" />
 
1. Login ke Akun blogger Anda. 
2. Pada Dasbord pilih Template > Edit HTML. 
3. Lalu temukan tag ]]></b:skin> 
4. Setelah ketemu sekarang letakkan CSS berikut di atasnya. 
 
<blockquote class="tr_bq">
/*Tema Vanila untuk Postingan Blogger by: Oto Website */ 
pre { 
background-color:white; 
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%); 
background-image:linear-gradient(top, #f5f5f5 50%, white 50%); 
-webkit-background-size:30px 30px; 
-moz-background-size:30px 30px; 
-ms-background-size:30px 30px; 
-o-background-size:30px 30px; 
background-size:30px 30px; 
background-repeat:repeat; 
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; 
color:#333; 
border:2px solid #666;-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
position:relative; 
padding:0 7px; 
margin:10px 5px; 
overflow:auto; 
word-wrap:normal; 
white-space:pre; 
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2); 
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2); 
box-shadow:0 1px 2px rgba(0,0,0,0.2); 
position:relative; 
} 
pre[data-codetype] { 
padding:29px 1em 7px 1em; 
} 
pre[data-codetype]:before { 
content:attr(data-codetype); 
display:block; 
position:absolute; 
top:0; 
right:0; 
left:0; 
background-color:#666; 
padding:0 7px; 
font:bold 11px/20px Arial,Sans-Serif; 
color:white; 
} 
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;} 
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;} 
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;} 
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;} 
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;} 
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;} 
pre[data-codetype="HTML"]:before {background-color:#0B7E88;} 
pre[data-codetype="CSS"]:before {background-color:#7B990C;} 
pre[data-codetype="JavaScript"]:before {background-color:#545448;} 
pre[data-codetype="JQuery"]:before {background-color:#395540;} 
pre[data-codetype="PHP"]:before {background-color:#FF9900;} 
pre[data-codetype="XML"]:before {background-color:#FF0C39; 
}</blockquote>
 
5. Simpan template. 
 
Jika CSS di atas sudah tertanam pada template blogger Anda, maka langkah selanjutnya untuk memanggil <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a> adalah dengan menggunakan Tag Pre seperti yang <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> sebutkan di atas. Berikut adalah tag yang di gunakan untug memanggil <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a>. 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">Kode pemanggil Tema Vanila untuk Postingan Blogger</a> 
<hr color="#0071bb" />
 
Letakkan tag berikut di dalam postingan Anda, dan ketika Anda ingin menggunakan <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila</a>! 
 
<blockquote class="tr_bq">
<pre data-codetype="HTML">Disini Tag XML</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="CSS">Disini Tag CSS</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="JavaScript">Disini Tag JavaScript</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="JQuery">Disini Tag JQuery</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="PHP">Disini Tag PHP</pre></blockquote>
 
Atau 
 
<blockquote class="tr_bq">
<pre data-codetype="XML">Disini Tag XML</pre></blockquote>
 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a> Ganti teks yang di BLOCK KUNING dengan tang yang ingin di masukkan sesuai temanya. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2</div>
 
Disini <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> juga menyediakan Trik Menginstal <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger Part 2</a>, sebenarnya cara ini sama saja, hanya saja <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">Saya</a> telah membungkus dan mengkompres tag tersebut dan menjadikan JavaScript, jadi Anda dapat memilih salah satu saja. 
Ingin menggunakan tag CSS standart atau menggunakan JavaScript? 
Jika Anda memilih menggunakan JavaScript maka Anda harus menghapus tag CSS di atas selanjutnya: 
 
1. Lalu letakkan JavaScript berikut di atas tag  </head> 
 
<blockquote class="tr_bq">
<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/></blockquote>
 
2. Simpan. 
 
<a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html" target="_blank">NB:</a>Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Sekian untuk tutorial kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html">Tema Vanila untuk Postingan Blogger</a>, jika ada pertanyaan atau masalah dalam penginstalan silahkan ajukan pertanyaan Anda melalui form komentar!

Tema Vanila untuk Postingan Blogger

Mempercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ini Oto Website akan berbagi cara tentang mempercantik blog de…

Baca selengkapnya »

24 Apr 2013

Windows 7 Logon Background Changer

Berikut ini Saya akan membagikan atau merekomendasikan sebuah alat atau perangkat lunak untuk pengguna Windows 7, yang di mana dengan menggunakan alat ini maka Anda akan dengan leluasa dapat mengganti <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Background Wellcome Screen Windows 7</a> tanpa harus bermain-main dengan Regedit. 
Tentunya Anda sudah paham apa dampaknya jika Anda bermain-main dengan Regedit dan jika Anda melakukan kesalan pada regedit windows komputer Anda. Besar atau kecil Anda melakukan kesalahan pada regedit maka dampaknya akan sangat terasa sekali bagi windows Anda. 
Seperti yang Saya alami ketika Saya mengganti background<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank"> LogOn</a> dengan mengutak atik regedit dan dampak kesalahannya akan sangat terasa, terasa sangat menyesal setelah melakukannya. 
Untuk itu Saya merekomendasikan Anda untuk menggunakan perangkat lunak ini yang bernama <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a>. Dengan menggunakan alat ini maka Anda tidak perlu lagi khawatir akan masalah atau kesalah dalam regedit pada waktu penggantian background <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">logon</a>. Berikut ini penjelasan dari alat ini: 
 
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a> adalah perangkat lunak open source gratis yang memungkinkan Anda mengubah wallpaper layar logon Windows 7 yang juga dikenal sebagai "<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar selamat datang</a>", "<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">layar login</a>" atau <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">LogonUI</a>. 
 
Alat ini bekerja dengan Windows 7 Home Basic, Home Premium, Professional, Ultimate, Enterprise dan Starter, di x86 atau x64 (32 atau 64 bit). Ini juga bekerja pada Windows Server 2008 R2 (tapi Anda tidak harus menggunakannya untuk menyesuaikan server). 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKJaZ2KB94SgaPEFGw_LRqsE0kAm99-S7a0mYMy9fAasmyoM3o5uLTnh45Scb3O8XMVQYjhJ-pxiE9IZx7ox-AkVReis_DrodmeMu4bGIZvRKbRLyr1UUY_Mw4SdgoIn35YVRGaDDXg/s1600/OW+logon+Background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="359" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKJaZ2KB94SgaPEFGw_LRqsE0kAm99-S7a0mYMy9fAasmyoM3o5uLTnh45Scb3O8XMVQYjhJ-pxiE9IZx7ox-AkVReis_DrodmeMu4bGIZvRKbRLyr1UUY_Mw4SdgoIn35YVRGaDDXg/s640/OW+logon+Background.png" width="640" /></a></div>
 
 
Di samping program ini kecil berbasis WPF, di atas adalah demo teknis kemampuan bagus Windows Presentation Foundation bagi mereka yang tertarik dalam WPF. Hal ini membutuhkan GPU layak untuk animasi 3D berjalan lancar. 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Apa yang dilakukannya?</a> 
<hr color="#0071bb" />
<ul>
<li>TIDAK mengubah sistem file, dan program itu sendiri tidak membutuhkan hak admin untuk menjalankan: itu hanya akan meminta Anda untuk menjalankan sebagai admin sebuah file cmd yang sangat sederhana yang menciptakan folder yang diperlukan dan kunci registri dengan hak yang sesuai. Setiap pengguna komputer akan dapat mengubah layar wallpaper Windows 7 logon. Anda juga dapat mencegah pengguna untuk dapat mengganti wallpaper layar logon jika Anda tidak ingin mereka dapat memodifikasi tanpa hak administrator (pilihan yang tersedia dengan mengklik tombol "Settings").</li>
<li>Ini menciptakan file beberapa JPEG berdasarkan gambar yang Anda ingin dan menempatkannya sebagai wallpaper untuk layar login Windows 7, berlaku sesuai ukuran dan menyimpannya menggunakan kualitas kompresi terbaik.</li>
</ul>
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Keterangan Tambahan</a> 
<hr color="#0071bb" />
<ul>
<li>Alat ini memiliki antar muka yang sangat sederhana sehingga akan sangat memudahkan untuk semua pengguna Windows 7.</li>
<li>Ukuran yang kecil.</li>
<li>Anda akan di berikan 2 file exe berbeda untuk menggunakannya: File Win7LogonBackgroundChanger dan Win7LogonBackgroundChangerSetup, Silahkan Anda pilih salah satu sesuai selera.</li>
</ul>
 
Untuk mengunduh <a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Windows 7 Logon Background Changer</a> silahkan tekan tombol berikut ini: 
 
 
 
 
<div style="text-align: center;">
<a class="button" href="http://adf.ly/NW2kB" target="_blank">Windows 7 Logon Background Changer</a></div>
 
 
 
<hr color="#0071bb" />
<a href="http://otowebsite.blogspot.com/2013/04/windows-7-logon-background-changer.html" target="_blank">Masalah Yang biasa di hadapi!</a> 
<hr color="#0071bb" />
 
Pada beberapa komputer, pesan galat berikut akan muncul: "Tidak bisa menulis ke folder c:\windows\system32\oobe\info\backgrounds\". 
 
Solusi: Buka "c:\windows\system32\oobe\info\" folder di Windows Explorer, kemudian mengubah nama "backgrounds" folder menjadi "backgrounds2". 
 
 
 
<div style="text-align: right;">
Software By: <a href="http://julien-manici.com/" target="_blank">Julian Manici</a> and publish back by the <a href="https://plus.google.com/u/0/101942472174789798746" target="_blank">dek rif</a>.</div>

Windows 7 Logon Background Changer

Berikut ini Saya akan membagikan atau merekomendasikan sebuah alat atau perangkat lunak untuk pengguna Windows 7, yang di mana dengan menggunakan alat ini maka Anda akan dengan leluasa dapat mengganti…

Baca selengkapnya »

23 Apr 2013

jQuery Slide Show Lembut Untuk Blogger

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gambar yang kita pamerkan pada blog tersebut. Dan untuk tutorial kali ini <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan membahas dan berbagi tentang gambar slider yang bertema '<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>'. 
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> memiliki efek yang lebih menarik dari slider sebelumnya, karna gambar slider ini memiliki lebih dari satu efek yang berbeda-beda ketika pergantian gambar. 
Untuk lebih jelasanya silahkan lihat demo berikut! 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
ScreenShot</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7pw3-ew7AiP59VN4CENclL7_sDnpslMNsyM1kYxgo0TlB46-fTnPXc__24JSVZAmV6ghn3ulMCr8xG7xEYogyPA2yvDh3kzDrVr4zjjj5Ogfg-10P3yiWLgUiqBxSPv-fR_aMMzdDyw/s1600/otowebsite-slide.png" /></a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Lihat Demo</div>
 
<div style="text-align: center;">
<a class="button" href="https://demo-otowebsite.googlecode.com/svn/trunk/jQuery%20Slide%20Show%20Lembut.html" target="_blank">Lihat Demo</a></div>
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Membuat</div>
 
Untuk cara membuatnya sendiri sebenarnya kita harus menambahkan dua kode berbeda, tapi disini Saya telah menjadikannya satu script mudah tanpa harus Mengedit HTML Anda. 
 
Cara membuatnya Anda hanya cukup ikuti langkah berikut: 
 
1. Login ke Akun Blogger Anda. 
2. Pada Dasbord pilih Tata Letak > Tambah Gadget. 
3. Pilih HTML/JavaScript. 
4. Lalu Copy kode berikut dan letakkan pada element tadi. 
 
<blockquote class="tr_bq">
<style> 
.nivoSlider { 
 position:relative; 
} 
.nivoSlider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%; 
 height:100%; 
 border:0; 
 padding:0; 
 margin:0; 
 z-index:60; 
 display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
 display:block; 
 position:absolute; 
 z-index:50; 
 height:100%; 
} 
/* Caption styles */ 
.nivo-caption { 
 position:absolute; 
 left:0px; 
 bottom:0px; 
 background:#000; 
 color:#fff; 
 opacity:0.8; /* Overridden by captionOpacity setting */ 
 width:100%; 
 z-index:89; 
} 
.nivo-caption p { 
 padding:5px; 
 margin:0; 
} 
.nivo-caption a { 
 display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Gaya arah Nav (Next & Prev) */ 
.nivo-directionNav a { 
 position:absolute; 
 top:45%; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-prevNav { 
 left:0px; 
} 
.nivo-nextNav { 
 right:0px; 
} 
/* Gaya Control nav (1,2,3...) */ 
.nivo-controlNav a { 
 position:relative; 
 z-index:99; 
 cursor:pointer; 
} 
.nivo-controlNav a.active { 
 font-weight:bold; 
} 
table { 
 border-collapse:separate; 
 border-spacing:0; 
} 
caption, th, td { 
 text-align:left; 
 font-weight:normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
 content:""; 
} 
blockquote, q { 
 quotes:"" ""; 
} 
/* Tags HTML5 */ 
header, section, footer, 
aside, nav, article, figure { 
 display: block; 
} 
a, a:visited { 
 color:#2d3536; 
 text-decoration:none; 
 border-bottom:1px dotted #826a4d; 
} 
a:hover, a:active { 
 color:#9e805c; 
 text-decoration:none; 
} 
#slider-wrapper { 
    background:url(https://code-otowebsite.googlecode.com/svn/trunk/slider.png) no-repeat; 
    width:494px; 
    height:310px; 
    margin:0 auto; 
    padding-top:23px; 
    margin-top:50px; 
} 
#slider { 
 position:relative; 
    width:430px; 
    height:250px; 
    margin-left:32px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/loading.gif) no-repeat 50% 50%; 
} 
#slider img { 
 position:absolute; 
 top:0px; 
 left:0px; 
 display:none; 
} 
#slider a { 
 border:0; 
 display:block; 
} 
.nivo-controlNav { 
 position:absolute; 
 left:163px; 
 bottom:12px; 
 background: #000000; 
 -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    padding: 3px; 
    border: 2px solid #CCC; 
    opacity: 0.7; 
    z-index: 99; 
 } 
 .nivo-controlNav:hover{opacity: 1;} 
.nivo-controlNav a { 
 display:block; 
 width:22px; 
 height:22px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/bullets.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
 margin-right:0px; 
 float:left; 
} 
.nivo-controlNav a.active { 
 background-position:0 -22px; 
} 
.nivo-directionNav a { 
 display:block; 
 width:35px; 
 height:65px; 
 background:url(https://code-otowebsite.googlecode.com/svn/trunk/arrows.png) no-repeat; 
 text-indent:-9999px; 
 border:0; 
} 
a.nivo-nextNav { 
 background-position:-35px 0; 
 right: -40px; 
} 
a.nivo-nextNav:hover{right: -41px;} 
a.nivo-prevNav { 
 left:-40px; 
} 
a.nivo-prevNav:hover{left: -41px;} 
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
} 
.nivo-directionNav a{top: 40%;} 
.clear { 
 clear:both; 
} 
</style> 
    
<div id="wrapper"> 
<div id="slider-wrapper"> 
<div class="nivoSlider" id="slider"> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpbLesS9GAj7-y_RSytHFSOmnsuSAvn74H5-sklS3cT4TOWRJqi0-3hPCeACYSwypTubLYdhOsgQ7U5mcGJx3KV5P6-5ue_DRIluy-6ZxFmg2YY6HGg8mHzyn4SNQUWrfkCPdojxXrg/s1600/OtoWebsite-bedugul.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYinTFF-H1OtdKNLHhzINm06h3-7XFeLLy59H_SI2UCL9lHr2gO5qHVaxV6aCrc05HG9rmf5jR-XRgncKiGoRkFGOjb7Bp3VthQy0_Uesngq2ODMgfF8V9i9E-stroVo4udf7t3jbbmw/s1600/OtoWebsite-gunung+takuban+perahu.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lgl-7Kcv7EKejN-_7rTnCaJeJ7ZdMUkIGkhfDpuXEWk8l3F_zjI5Ur9kiYCjl1N-5sxFNTwsAR9GJPM9o-80mBbwJa34iOJ1KXBmzgmHMzAvTv7UbRFd7_O6loEAZ65VmUjMMoJ4Cw/s1600/OtoWebsite-raja+ampat.jpg" /> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRKnLIQNT4PE3lrJYQCBJzbp1ULM88HLfCqWw9AyALFhmhk8rCk3xIT0yPgSZY0oBRCbho1zPnvwplvv5xRkrO7JGsLIwTEgRB75geX4zMUPEhwK84kyDvWHKUzRjyEMtYYmB-2p7dA/s1600/OtoWebsite-watu+ulo.jpg" /> 
</div> 
</div> 
</div> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script> 
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function() { 
        $('#slider').nivoSlider({directionNavHide:false}); 
    }); 
    </script></blockquote>
 
<ul>
<li>Keterangan: Tag yang di blok kuning adalah Url gambar, silahkan Anda ganti dengan Url gambar Anda sendiri.</li>
</ul>
5. Simpan Widget. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">
Dari Meja Editor</div>
 
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a>, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/04/jquery-slide-show-lembut-untuk-blogger.html">jQuery Slide Show Lembut Untuk Blogger</a> maka silahkan ajukan pertanyaan Anda dalam komentar.

jQuery Slide Show Lembut Untuk Blogger

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gam…

Baca selengkapnya »

21 Apr 2013

Google Plus Badge Auto Hide

Google Plus Badge Adalah salah satu sarana untuk mendapatkan para pengunjung blog secara tetap, dengan memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge maka kita akan memperbolehkan pengunjung untuk mengikuti blog kita melalu Akun Google Plus mereka, dan mengetahui berbagai aktifitas blog kita seperti ada postingan terbaru dan lain sebagainya. 
Kali ini Oto Website akan berbagi cara tentag bagaimana cara membuat atau memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge di blogger! Karna cara untuk membuat atau memasang <a href="https://plus.google.com/115780777398536909642?prsrc=1" target="_blank">Google Plus</a> Badge di blogger sangatlah mudah jadi kita akan mengganti topiknya menjadi "<a href="http://otowebsite.blogspot.com/2013/04/google-plus-badge-auto-hide.html">Google Plus Badge Auto Hide</a>". 
Bagi Anda (Admin) blogger/website yang merasa kekurangan atau kehabisan tempat widget di blog/web-nya maka dengan memasang  Google Plus Badge Auto Hide akan sedikit membantu Anda karna dengan memasang Google Plus Badge Auto Hide Anda tidak perlu memberikan tempa widget pada badge ini, di karenakan badge ini akan melayang di sisi kanan blog/situs Anda. 
Cara kerjanya sendiri sama dengan  <a href="http://otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html" target="_blank">Facebook Like Auto Hide</a>. Yaitu badge ini akan muncul ketikan menyentuh cursor dan menutup ketikan cursor tidak menyentuhnya. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">ScreenShot</div> 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Nrej8tm0eTmwgb_ykWc9lBHabTDtgr8oGwkCESTmBAwBMbp-6kyBmtNxTT8euZ8RSnSrc6QVNrUm9KbyMfB3DprQa6Ad9LVqYUjyPUzVqlLQBACS3LW1lOsqqeV_lIeyRsuvOCGxfg/s1600/gplus+auto+hide.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Nrej8tm0eTmwgb_ykWc9lBHabTDtgr8oGwkCESTmBAwBMbp-6kyBmtNxTT8euZ8RSnSrc6QVNrUm9KbyMfB3DprQa6Ad9LVqYUjyPUzVqlLQBACS3LW1lOsqqeV_lIeyRsuvOCGxfg/s1600/gplus+auto+hide.png" /></a></div> 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Cara Membuat dan Memasang</div> 
Jika Anda ingin menggunakan Google Plus Badge Auto Hide maka sebelumnya Anda harus sudah memiliki Akun Google Plus. Jika belum silahkan baca caranya <a href="http://otowebsite.blogspot.com/2012/05/membuat-halaman-fans-page-google-plus.html" target="_blank">disini</a>. 
Untuk Cara Membuat dan Memasangnya di Blogger silahkan Anda ikuti langkah-langkah berikut ini: 
 
1. Pergi ke Dasbor Blogger Anda. 
2. Pilih Template >> Edit HTML. 
3. Temukan tag <head> 
4. Lalu letakkan scrip berikut di atasnya: 
 
<div class="md4"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://code-otowebsite.googlecode.com/svn/trunk/gplusone.js"></script> 
</div> 
5. Simpan Template Anda. 
 
6. Pilih Tata Letak >> Tambah Gadget >> Pilih elemen HTML/JavaScript. 
 
7. Sekarang letakkan JavaScript berikut ke dalam elemen tadi. 
 
<div class="md8"><script type="text/javascript"> 
/*<![CDATA[*/ 
jQuery(document).ready(function() {jQuery(".OW-gplus").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); 
/*]]>*/ 
</script> 
<style type="text/css"> 
.OW-gplus{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gplus.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 65px;width: 246px;z-index: 99999;position:fixed;right:-250px;top:44%;} 
.OW-gplus div{border:none;position:relative;display:block;} 
</style> 
<div class="OW-gplus" style=""> 
    <div> 
 
 
<div class="g-plus" data-href="//plus.google.com/115780777398536909642" data-rel="publisher"> 
 
 
</div> 
</div> 
</div> 
</div> 
Keterangan : Ganti teks yang di blok merah dengan ID <a href="https://plus.google.com/115780777398536909642?prsrc=1">Google Plus</a> Anda. 
 
8. Simpan. 
 
Sekarang Anda dapat melihat Google Plus Badge Auto Hide ini melayang di sisi kanan blog/web Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div> 
Sekian untuk tutorial <a href="http://otowebsite.blogspot.com/2013/04/google-plus-badge-auto-hide.html" target="">Google Plus Badge Auto Hide</a>, Semoga tutorial yang Saya bagiakan kali ini dapat bermanfaat untuk Anda semua. Bila Anda menglami masalah atau pertanyaan tentang tutorial kali ini, silahkan Ajukan pertanyaaan Anda melalui komentar.

Google Plus Badge Auto Hide

Google Plus Badge Adalah salah satu sarana untuk mendapatkan para pengunjung blog secara tetap, dengan memasang Google Plus Badge maka kita akan memperbolehkan pengunjung untuk mengikuti blog kita mel…

Baca selengkapnya »

12 Apr 2013

Komentar Slide Panel

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4ehA5ggi6h_OjFZJHSWbNvuAJAs2Qb3xmGGRE6vogzLasUnVnQbjWY6ObXnU6wXYu7tNIY_1sq4uR2JLpeiYymDRyI1K_TCyRF_LNcnV4Tv0veAuv9KNl4EEqLRzA2jQHEBJIRdFBg/s1600/komentar+slide+panel.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4ehA5ggi6h_OjFZJHSWbNvuAJAs2Qb3xmGGRE6vogzLasUnVnQbjWY6ObXnU6wXYu7tNIY_1sq4uR2JLpeiYymDRyI1K_TCyRF_LNcnV4Tv0veAuv9KNl4EEqLRzA2jQHEBJIRdFBg/s1600/komentar+slide+panel.png" width="320" /></a></div>Untuk di perjumpaan kali ini <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> akan berbagi sebuah tutorial blogger. Jika Anda sering kemari maka Anda pasti pernah melihat kotak komentar blog ini menggunakan <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html" target="">Komentar Slide Panel</a>, yang di mana bila kita ingin berkomentar kita harus menekan panel tersebut menggunakan cursor untuk membuka kotak komentar yang di sembunyikan di dalam panel tersebut. 
Tutorial tersebutlah yang kali ini akan <a href="http://otowebsite.blogspot.com/" target="_blank">Oto Website</a> bagikan kepada Anda. Untuk cara pembuatannya sendiri kita membutuhkan bantuan dari jQery agar <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html">Komentar Slide Panel</a> ini berjalan dengan semestinya. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Sceenshot dan Cara kerja</div> 
<div class="separator" style="clear: both; text-align: center;"><a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html"><img border="0" height="608" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4WrtSl3URzFADl_Qy4q0pXUNjRSAYMEi6WfHeNoR6NxOSs5WWb4WNxSi5OkaSq7k0S-Z2_oH37bm1xO1dIQOf9EZVsb784lV-7GcizYgr7EJVT6-6OUP_L99SUBczkivuNMb-WaBjw/s1600/Scrolling+Recent+Posts+Widget+For+Blogg.png" width="640" /></a></div> 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">1. Cara Menginstal di Blogger</div>2. Masuk ke akun Blogger Anda. 
3. Pada Dasor pilih Template >> Edit HTML. 
4. Lalu temukan tag-tag berikut: 
 
5. Letakkan tag berikut di bawah tag <head> 
 
<blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    
    $(&quot;.toggle_container&quot;).hide(); 
  
    $(&quot;h3.trigger&quot;).click(function(){ 
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;); 
    }); 
  
}); 
</script></blockquote> 
6.  Letakkan di atas ]]></b:skin> 
 
<blockquote class="tr_bq">/*----- Komentar Slide Panel by www.otowebsite.com ----*/ 
h3.trigger { 
background: url(https://code-otowebsite.googlecode.com/svn/trunk/komentar slide panel.png) no-repeat; 
height: 44px; 
line-height: 46px; 
width: 518px; border-radius:4px; 
font-family:Arial; 
font-size: 1.4em; 
font-weight: bold; 
text-align:left; 
color:#A1A1A1; 
float: left; 
cursor:pointer; 
box-shadow: #333 0px 1px 3px; 
padding:0 0 0 50px; 
margin:10px 0px 10px 10px; 
} 
 
h3.active { 
background-position: bottom left; 
color:#ddd; 
} 
.toggle_container { 
padding-left:10px; 
overflow: hidden; 
clear: both; 
}</blockquote> 
<ul><li>Untuk mengganti tombol panel cukup rubah kode ini 518</li>
<li>Anda juga dapat menyesuaikan kode yang lainnya sesuai keinginan Anda, contoh kode yang di block kuning adalah kode untuk mengganti jenis font huruf.</li>
</ul> 
7. Selanjutnya cari tag berikut: 
 
<blockquote class="tr_bq"><b:includable id='comment-form' var='post'></blockquote> 
lalu letakkan tag berikut di bawahnya 
 
<blockquote class="tr_bq"><h3 class='trigger'>Click Here To add Comment</h3> 
<div class='toggle_container'> 
<div class='block'></blockquote> 
8. Scroll sedikit kebawah dan letakkan tag berikut di atas tag </b:includable> 
<blockquote class="tr_bq"> 
<a href='http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html' style='color:#CAC8C8;'>Oto Website</a> 
 
</div> 
</div></blockquote> 
Penampilan peletakkan tag/kode nomer 7 dan 8 adalah seperti ini: 
 
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5TKyO3Y0KC0AqaZ9WWVE7U02E_uSVPg_nTsyKsORq6wczvkv680YH69vL2Jm1HmWDP6RcEeTVvzErcSWqOmLj0t4u36MXxJwcUqGpHoUFgR9qOzW4L0gEs1rVPEykPpZb01UoePuuw/s1600/gg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5TKyO3Y0KC0AqaZ9WWVE7U02E_uSVPg_nTsyKsORq6wczvkv680YH69vL2Jm1HmWDP6RcEeTVvzErcSWqOmLj0t4u36MXxJwcUqGpHoUFgR9qOzW4L0gEs1rVPEykPpZb01UoePuuw/s1600/gg.png" width="574" /></a></div> 
9. Simpan Tempalate Anda. 
 
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style> 
<div class="YOUR HEADLINE CLASS i.e ow">Dari Meja Editor</div>Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html" target="_blank">Komentar Slide Panel</a>, mudah-mudahan dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan <a href="http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html" target="_blank">Komentar Slide Panel</a> maka silahkan ajukan pertanyaan Anda dalam komentar.

Komentar Slide Panel

Untuk di perjumpaan kali ini Oto Website akan berbagi sebuah tutorial blogger. Jika Anda sering kemari maka Anda pasti pernah melihat kotak komentar blog ini menggunakan Komentar Slide Panel, yang di …

Baca selengkapnya »

11 Apr 2013

Load more posts

Oto Website

Tema Vanila untuk Postingan Blogger

Windows 7 Logon Background Changer

jQuery Slide Show Lembut Untuk Blogger

Google Plus Badge Auto Hide

Komentar Slide Panel

Entri Populer

Arsip Blog