Tutorial Membuat Template Blog Dengan Artisteer 3.1

Baru-baru ini saya searching cara membuat template blog dengan software artisteer 3.1, dan ternyata pencarian saya itu tidak cukup memuasakan saya sobat blogger. Mungkin saja karena saya belum maksimal dalam melakukan pencarian tentang itu. Tetapi terlintas dalam benak saya " ya sudahlah mendingan saya download softwarenya dulu sendiri saja dan setelah itu pelajari sendiri cara membuat template blognya ". Akhirnya ketemu link downloadnya. Ya Alhamdulillah ya sobat jadi gak perlu beli hehehe, maklum orang miskin. Akhirnya saya jadi tau cara membuat template dengan software artisteer ini.
Nah di sini saya akan berbagi info dan pengetahuan saya yang sedikit ini kepada sobat blogger semua. Ya siapa tau saja ada yang bermanfaat bagi sobat blogger semuanya. Gak usah khawatir sobat blogger. Ternyata cukup mudah kok sobat blogger cara memakai software ini untuk membuat template sesuai keinginan sobat. Yang penting sabar, teliti dan yang pasti kreatif sobat. Sobat blogger tinggal ikuti saja langkah-langkah berikut ini sobat :

1.   Download software artisteer 3.1 di sini nya atau kalau punya uang beli sekalian sobat ya agar bisa mendapatkan yang full version.

2.   Setelah itu yang pasti diinstal kan software itu.

3.   Nah kalau sudah buka softwarenya dan akan muncul seperti gambar dibawah ini ( Tentu sebelumnya sudah full version dulu ya sofwarenya sobat agar lebih enak ngeditnya ).

4.   Nah untuk blogspot pilihlah logo blogger seperti gambar di atas.

5.   Kemudian sobat tinggal pilih contoh rancangan tempate dengan mengeklik gambar lampu berwarna orange di samping kiri atas, seperti gambar di bawah ini.

6.   Nah pastinya akan muncul rancangan-rancangan template yang sangat menarik sobat. 

7.   Pilih salah satu yang sobat suka dan edit semau apa template yang diinginkan sobat. Contohnya dengan mengeklik salah satu gambar lampu seperti di bawah ini untuk mengganti header.

8.  Nah jika sudah selesai dalam mengedit template sesuai keinginan sobat. Sekarang tinggal diterapkan di blog sobat. Yaitu dengan cara mengeklik tombol Publish Template To Blogger.com ( Untuk Blogspot ). Atau seperti gambar di bawah ini.

9.  Nah setelah diklik pasti akan muncul gambar seperti ini sobat.

10.   Kemudian isikan user name dan password email sobat dengan benar dan klik publish seperti gambar di ats sobat. Dan untuk pengisian blog akan keluar dengan sendirinya jika user name dan password email telah diisi dengan benar.

11.   Tunggu sebentar karena sincronisasi ke blog sobat sedang dalam proses.

12.   Jika sudah selesai maka akan muncul gambar seperti ini.

13.   Copy script template tersebut dan klik continue. Maka akan masuk ke halaman edit html template tampilan lama seperti ini.

14.   Hapus semua code di dalamnya dan kemudian paste dan simpan template sobat.

15.   Dan lihat hasil karyamu sendiri sobat.

Semoga berhasil dan sukses ya. Kalau ada pertanyaan jangan lupa tanya ya di komentar saya.

Memasang Widget Encode HTML di Blog

Hallo sobat blogger semua, pernah gak mengalami kesuliatan saat punya keinginan gimana ya cara bisa memasukkan code html ke dalam postingan kita. Saat kita sudah memasukkan code html ke dalam postingan kita eeh malah yang muncul kode yang semprawut atau malah udah jadi dalam bentuk aplikasi. Nah pasti perlu encode agar bisa di masukin ke postingan sobat kan.Pernah terlintas gak sobat gmana agar sobat punya aplikasi encode sendiri di dalam blog sobat. nah kini sobat dapat mempermudah dala menuliskan code html sobat dengan mudah dengan encode yang sudah ada di dalam blog sobat sendiri. Jadi gak perlu deh nyari-nyari pihak ketiga untuk mengencode code html sobat.

Nich langsung saja sobat ikuti langkah-langkah berikut ini.

Langkah-langkahnya adalah sebagai berikut :

1.   Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments..

2.   Pilih Layout (Rancangan/ Tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda dan pilih HTML/JavaScript.

3.   Kemudian masukkan salah satu script berikut sobat ( Karena ada dua pilih salah satu saja yach atau mau dua-duanya juga boleh )

code 1 :

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=320&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"></script>

Maka Hasinya akan seperti ini sobat :

Code 2

<script type="text/javascript">
function adsconverter(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}


function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
else if (match=="(")
return "("
else if (match==")")
return ")"
}


</script>


<table border="0" cellpadding="10" cellspacing="1" width="100%">
<form>
<tbody>
<tr>
<td bgcolor="D1D1D1">
<div align="center">
<strong style="font-size: 14px; text-decoration: none; color:#FF0000;">Paste Kode HTML di sini lalu Copy</strong>
</div>
<br />
<textarea name="txt" wrap="virtual" rows="10" style="width: 98%;" onfocus="this.select()"></textarea>
<br />
<div align="center">
<input name="res" value="Reset" id="res" type="reset" />&nbsp;<input onclick="adsconverter(this.form.txt)" value="HTML Encoder" type="button" />
</div>
</td></tr></tbody></form>
<br />


<div align="center">


<a style="font-size: 14px; text-decoration: none; color:#0000FF;" href="http://negeriinfo.blogspot.com/" target="_blank">Copyright &copy; 2011 Negeri Info &reg</a>


</div>

Maka Hasinya akan seperti ini sobat :

4.   Nah kalau sudah disimpen dech sobat.

Catatan :

*.   Selengkapnya silahkan sobat kunjungi alamat ini http://www.gmodules.com/ig/creator?synd=open&url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&lang=en

Semoga sukses dan berhasil ya

Membuat Menu Tab View Tanpa Merubah Template Blog

Menu Tab View adalah wignet yang pas sekali dan praktis di gunakan sebagai menu navigasi yang bisa meringkas dan menyimpan link , data , maupun widget yang lain , sehingga blog kita kelihatan lebih praktis dan profesional. Sering kita jumpai dalam pembuatan menu tab view memerlukan editing template yang cukup rumit dan berbelit-belit, sehingga kitapun merasa kesulitan dan pusing di buatnya.. Kali ini penulis akan berbagi info dengan sobat bloggger semuanya cara Membuat Menu Tab View Tanpa Merubah Template Blog yang lebih praktis dan mudah sobat. Baiklah mari kita ikuti cara-cara pembuatannya ya sobat.

Caranya sebagai berikut sobat :

1.   Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments

2.   Pilih Layout (Rancangan/ Tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda dan pilih HTML/JavaScript

3.   Kemudian masukkan scrip dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 25px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Main Menu Top Width */
text-align:center ; height: 25px; /* Top High Main Menu
*/
padding-top:5px; vertical-align:middle; border:1px solid #303030; /* Top Menu border color */
border-bottom-width:0; text-decoration: bold; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:none; font: normal 12px arial; letter-spacing:-0.07em; background:#CF2023; color:#000000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: #E17612; color: #000000; font-weight:bold; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:1px solid #303030; /* Main Box border color */ overflow:hidden; background-color:#ffffff; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Nama Menu 1</a>


<a>Nama Menu 2</a>


<a>Nama Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

*   Untuk text yang berwarna orange adalah sebagai penjelasan dan keterangaan untuk mengedit kata sebelum text itu.
*   Untuk text yang berwarna hijau ganti dengan nama menu yang sobat inginkan.
*   Untuk text yang berwarna pink atur dan sesuaikan dengan lebar dan tinggi template sobat.
*   Untuk text yang berwarna kuning isi dengan apa saja yang sobat mau.

4.   Simpan dan lihat hasilnya sobat.
5.   Contoh hasinya adalah sebagai berikut seperti punya saya sobat :

Semoga berhasil dan bermanmaat sobat ya

Cara Membuat Sesuatu Melayang Di Blog

Mungkin masih ada yang belum paham dengan Cara Membuat Sesuatu Melayang Di Blog. nah kali ini saya akan berbagi cara atau trik tersebuat. Di dalam kode ini sobat blogger semua dapat menyisipkan gambar, banner, script atau kode apapun. Nah pastinya keren donk bila blog sobat bisa seperti itu. Blog sobat akan kelihatan lebih menawan dan indah. Tapi jangan terlalu rame ya, ntar nutupin halaman blog semuanya lagi. Gambar melayang ini akan mengikuti kemanapun scroll ditarik gambar akan tetap pada posisi semula jadi akan terus kelihatan sobat. Baiklah gak usah terlalu lama bicaranya ya, langsung saja kita praktekin yuck :

Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :

1. Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2. Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3. Sekarang cari (CTRL + F) kode ini ]]></b:skin> di template dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi :

*   Jika ingin memasang gambar/banner di posisi kanan atas blog.

#registrasi {
top:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kanan bawah blog.

#registrasi {
bottom:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kiri atas blog

#registrasi {
top:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

*   Jika ingin memasang gambar/banner di posisi kiri bawah blog.

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

4.   Selanjutnya Copy-paste kode di bawah ini setelah </body>

<div id='registrasi'>
<a href='http://namablogsobat.blogspot.com/'>
<img border='0' src='http://gambar.gif'/></a>
</div>

Catatan :

*   Untuk text yang berwarna orange sobat ganti dengan alamat blog sobat.
*   Untuk text yang berwarna pink sobat ganti dengan apa saja yang sobat mau.

5.   Simpan template dan lihat hasilnya sobat.

Semoga sukses dan berhasil ya sobat

Cara Instal Social Bookmark Mengambang di Blogger

Cara Instal Social Bookmark Mengambang di Blogger mungkin ada yang sudah tau caranya gimana kan. Nah kali ini itung-itung mengulang pelajaran yang sudah-sudah. Tetep tujuannya berbagi info dan pengetahuan demi mencerdaskan bangsa kita. Yang satu ini bisa sobat lihat pada Social Bookmark pada blog saya yang mengambang sobat. Karna icon-icon yang ditampilkan lebih kecil dari biasanya dan lebih menawan oleh karena itu saya tertarik untuk memasangnya. mungkin sobat semua juga tertarik barang kali. baiklah akan semuanya cepet mengerti langsung saja kita kasih cara untuk ngebuatnya ya sobat. Tapi sebelumnya saya kasih contoh gambarnya dulu nich agar sobat blogger semua tau seperti apa sich yang saya bicarakan ini. Nah ini dia penampakannya sobat :

Nah kalau sudah mari kita pelajari cara ngebuatnya sobat :

1.   Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2.   Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3.   Sekarang cari (CTRL + F) kode ini ]]></ B: skin> di template dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi :

#divStayTopLeft {left:5px;position:absolute;top:15px;}
.sidetab {}
.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}
.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}
.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}
.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}
.sidetab a:hover {border: none;background: #e8e8e8;}
.sidetab .button a {background:none;height: 25px; width: 25px;}

4.   Kemudian cari kode berikut </body> dan letakkan kode di bawah ini tepat sebelum atau di atas kode </body> tadi :

<DIV id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>
<li class='button'><a href='http://negeriinfo.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>
<a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>
<a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>
<a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>

<a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>
<a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>


</ul>


</div>


</DIV>


<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>

5.   Kalau sudah simpan template dan lihat hasilnya sobat

semoga berhasil dan sukses ya

Membuat Menu Horisontal Dropdown Dengan jQuery

Hallo sobat ketemu lagi nich di bulan yang penuh berkah ini. Masih ingatkah sobat dengan Menu Horisontal Dropdown. Udah pad punya belom nich menu seperti ini. Kalo belom Heeem kali ini saya akan berbagi  lagi tentang cara Membuat Menu Horisontal Dropdown Dengan jQuery. Menu horisontal yang ini cukup menawan sobat, sehingga kalu sobat memasang pada blog sobat maka tampilan blog sobat akan lebih keren lagi sobat. Yang pastinya akan menarik lebih banyak pengunjung ke blog sobat. Langsung saja lihat penampakanya ya sobat, Mau tau seperti apa tampilannya. Ini dia contoh gambarnya sobat :

Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2.   Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3.   Sekarang cari (CTRL + F) kode ini di template </head> dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){


$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click


$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCcNGE-GtgovY_31mnUslvcOh1hKfjW7Z3Qg5p_I_e2wsD8xtkeqkZB-sgFcDxjjkVaiENz9n9mv6mAbFWZl7HjIpT_Y_h02-q5Aq6mejhNtPtLnqZMWBNnrQPz1F1-FSloQde8z6SHr6/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVvvnOnzNi3DnkYrv3KYFe_uxc7RorcxK5SPXx-5SXxqo-gI3EnZvDzbyKIP056Ka49vekS-MR7uQcOUm36WmIoH6fuDYK2h5paTu0dCX_iJxinDQZNwz8219LtZhQiCWAAvlfiOdxM_d/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgrfEsSkqzpxoMwD0-mYdfI2DgZQDoDXo2rKjcOVnOiHOUdcPcz7HmBxz-1kZrjxuoIE7t1RrWe6C-rqwtCp_evntqJYEZv9fgar48DgP3o5WBX_Zwl97dDUs8gwktY65e4w0-IYcaBRz/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWPTNO6zVaWbc5MLR7zOs4mWjj6f-cwbEWl10GT1gFVD7EZRm_yYzPXS9yd0IzP9uRxXaj5sdqaRJ3VvTa6RkPM0CxPh8TrgWBfMlodTMRW-R42wJPq-EsmXWOQu0uNe2GESu1NWpaaMJ/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWPTNO6zVaWbc5MLR7zOs4mWjj6f-cwbEWl10GT1gFVD7EZRm_yYzPXS9yd0IzP9uRxXaj5sdqaRJ3VvTa6RkPM0CxPh8TrgWBfMlodTMRW-R42wJPq-EsmXWOQu0uNe2GESu1NWpaaMJ/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>

4.   Kemudian simpan template punya sobat terlebih dahulu.
5.   Masuk menu Layout kemudian masuk menu Page Elements
6.   Pilih box layout yang diinginkan kemudian klik Add a gadgets
7.   Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini di posisi header :

<ul class="topnav">


<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>


</ul>

Catatan :

*   Untuk tanda # dapat sobat ganti dengan url atau link yang sobat mau
*   Untuk Teks yang berwarna orange dapat sobat ganti dengan sesuai keinginan sobat

8.   Simpan dan lihat hasilnya ya sobat

Semoga berhasil dan sukses ya

Cara Mengganti Cursor Mouse Pada Blog

Hallo sobat jumpa kembali nich. Mungkin tiap hari ngeblog ada yang udah bosen dengan tampilan mouse yang sobat punya pada tampilan blog sobat yang standart melulu. Hemmmmm di sini saya mau membantu sedikit nich mempercantik tampilan blog sobat sekalian dengan mengganti cursor mouse pada blog. Gak terlalu sulit kok sobat caranya. Penasaran gak nich. Langsung saja ke TKP saja yah. Tapi jangan lupa buat menyimpan dahulu template milik sobat yach sebelum mengedit.

Ikuti cara-cara berikut sobat :

Cara Pertama :

1.   Masuk account Blogger.

2.   Pilih Dashboard/dasbor.

3.   Layout/tataletak trus pilih EDIT HTML.

4.   Trus cari kode berikut body { Kalau sudah ketemu, kalian copy kode di bawah ini tepat dibawah kode tersebut :

cursor: url("http://i23.photobucket.com/albums/b377/xXPaRaDiSeBaBiXx/Cursors/peace.gif"), default;

5.   Selesai

Catatan :

*   Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Kedua :

1. Masuk account Blogger.
2. Pilih Dashboard/dasbor.
3. Pilih tambah gadget tambahkan HTML java script.
4. Pastekan kode berikut sobat :

<style type="text/css">body {cursor:url("http://i23.photobucket.com/albums/b377/xXPaRaDiSeBaBiXx/Cursors/peace.gif"),default}</style>

5. Selesai.

Catatan :

*   Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Ketiga :

1.   Masuk account Blogger.

2.   Pilih Dashboard/dasbor.

3.   Layout/tataletak trus pilih EDIT HTML.

4.   Trus cari kode berikut ]]></b:skin> Kalau sudah ketemu, kalian copy kode di bawah ini tepat dibawah kode tersebut :

<style type='text/css'>body, a {cursor: url(http://lh4.ggpht.com/_TWC8zfBIdik/S-azAjwjYKI/AAAAAAAAAxg/vcB1bh9X0CM/roxxcur1.png), progress;} a:hover {cursor: url(http://lh6.ggpht.com/_TWC8zfBIdik/S-azAn6JodI/AAAAAAAAAxk/kdC4_mmwr9c/roxxcur2.png), progress;}</style>

5.   Selesai dech

Cattatan :

*   Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Keempat :

1.   Buka 123corsor.
2.   Pilih kursor (klik).
3.   Copy kode HTML yang ada didalam kotak link (dibawah gambar cursor yang sudah diklik).
4.   Masuk account Blogger.
5.   Pilih Dashboard/dasbor.
6.   Pilih tambah gadget tambahkan HTML java script.
7.   Pastekan kode yang tadi kamu copy.
8.   Simpan dan Selesai dech.

Moga berhasil dan bermanfaat ya sobat

Cara Membuat Widget Penerjemah Dari Google

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

kita mulai cara membuatnya ya sobat. Di sini saya akan memberikan 3 (macam) atau pilihan. Silahkan sobat pilih sendiri ya.

Ikuti langkah-langkah berikut ini sobat :

1.    Masuk menu Layout kemudian masuk menu Page Elements

2.    Pilih box layout yang diinginkan kemudian klik Add a gadgets

3.    Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini :

a.    Vertikal

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

Jadinya Seperti Ini Sobat :

b.    Horizontal

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

Jadinya Seperti Ini Sobat :

c.    Tarik-turun saja

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

Jadinya Seperti Ini Sobat :

4.    Kalau sudah di save saja ya sobat.

Semoga berhasil dan sukses ya sobat

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

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

Ikuti saja langkah berikut ini ya sobat :

1. Buka situsnya Google yang ini (di sini) ya sobat.

2. Kemudian Log In dengan Account Google kamu sobat.

3. Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..

4. Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate codenya kedalamnya ya sobat.

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

Gambarnya seperti ini sobat :

Catatan :

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

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

Semoga berhasil dan sukses ya sobat

Cara Membuat Horizontal Drop Down Menu Pada Blogspot

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

Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit sebaiknya template punya sobat diedit terlebih dahulu ya.

2.   Login ke blogger dulu sobat ya.

3.   Klik tata letak.

4.   Klik sunting HTML.

5.   Contreng Expand Template Widget.

6.   Cari kode ]]></b:skin>, kemudian letakkan kode berikut sebelum kode ]]></b:skin>

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

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

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

8.   Cari kode seperti ini yang mirip

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

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

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

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

Catatan :

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

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

Semoga berhasil dan sukses ya sobat