Recent Blog post
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Hallo para pengunjung AndzZ-Blog'z !! Apa kabar..??
Nahh.... Mulai hari ini Saya akan Posting'kan tentang Tutorial Blogger !
Posting kali ini adalah : "Cara Membuat Widget Subscribe Di Blog"
Nah udah pada tau kan Widget Subscribe ? Kalo belum tau liat Gambar ajj !
Oke, Berikut caranya :
- Login ke Blogger
- Klik Tambahkan Gadget "Add a Gadget/Tambah Gadget"
- Pilih yang HTML/JavaScript
- Paste kode dibawah ini
<style> .knetwork-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBXrvK_nUfjvGrc4Isc54BG-sy1zDAY1oMRVpgvEhBCO9xNcQW8pAb1Zd9qOFguh-Tpfg25AtqWY13nMiFmw9-7QnSUg6KojO6x4fvyZomVzzwq2WFB2JvmZBHW35Gl5hIxcvUkrIS2hK/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.knetwork-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.knetwork-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="knetwork-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify?uri=andzz-blogz" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=andzz-blogz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="knetwork-emailsubmit" value="Submit" type="submit" />
</form>
</div>
- Lalu Simpan, dan lihat hasilnya :)
Keterangan :
* Sekarang ganti http://feedburner.google.com/fb/a/mailverify?uri=andzz-blogz dengan Feedburner Feed kamu Link Email. kamu bisa mendapatkannya dengan mengunjungi account feedburner kemudian arahkan ke Publikasikan dan kemudian ke Email Subscriptions.
* Ganti
dengan judul feed kamu..
Cara Membuat Widget Subscribe Di Blog
Hallo para pengunjung AndzZ-Blog'z !! Apa kabar..??
Nahh.... Mulai hari ini Saya akan Posting'kan tentang Tutorial Blogger !
Posting kali ini adalah : "Cara Membuat Menu Tab View Di Blog"
Apa itu Menu Tab View ?? Nih, Liat ajj gambarnya !
Oke, Berikut caranya :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste pada gadget.
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none; {
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://kamu-klik.blogspot.com/2011/12/widget-menu-tab-view-termudah.html" target="_blank"><blink>widget</blink></a></p></div>
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none; {
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://kamu-klik.blogspot.com/2011/12/widget-menu-tab-view-termudah.html" target="_blank"><blink>widget</blink></a></p></div>
4. Apabila sudah di paste, kamu klik SIMPAN
Apabila kalian sudah menambahkan kode Menu Tab View di atas, Maka kamu cukup mengatur widget2 mana yang ingin kamu masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin kamu tambahkan ke bawah widget Menu Tab View tersebut.
Apabila kalian sudah menambahkan kode Menu Tab View di atas, Maka kamu cukup mengatur widget2 mana yang ingin kamu masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin kamu tambahkan ke bawah widget Menu Tab View tersebut.
silakan lihat gambar di bawah ini:
Simpan, dan lihat hasilnya :D
Simpan, dan lihat hasilnya :D
Cara Membuat Menu Tab View Di Blog
Hallo para pengunjung AndzZ-Blog'z !! Apa kabar..??
Nahh.... Mulai hari ini Saya akan Posting'kan tentang Tutorial Blogger !
Posting kali ini adalah : "Cara Membuat Pesan Selamat Datang Di Blog"
Pernah kan waktu mengunjungi blog, lalu muncul pesan seperti menyambutmu. Yap, pesan selamat datang atau Ucapan selamat datang karna kamu sudah mengunjungi blog tersebut.
Nah, Kali ini Saya bakal ngasih tau, gimana sih biar ada pesan selamat datang seperti itu ?
Caranya gampang koq, kamu tinggal memsang scriptnya saja dibagian edit HTML.
Oke, Berikut caranya :
- Login Ke Blogger.
- Klik Tata Letak.
- Klik Edit HTML.
- Kemudian Cari Kode <head> (Untuk mempermudah pencarian, gunakan CTRL + F) lalu Copy dan paste kode berikut di atasnya.
<SCRIPT language='JavaScript'>alert("Selamat Datang");</SCRIPT>
- Kalo sudah, tinggal Simpan Template :)
* Ganti tulisan Berwarna MERAH dengan Kata-kata kalian Sendiri :)
Oke, selamat mencoba kawan !! ^.^
Cara Membuat Pesan Selamat Datang Di Blog
Hallo para pengunjung AndzZ-Blog'z !! Apa kabar..??
Nahh.... Mulai hari ini Saya akan Posting'kan tentang Tutorial Blogger !
Posting kali ini adalah : "Cara Membuat Menu Navigasi Dropdown Di Blog"
Wah ? Apa tuh Menu Navigasi Dropdown ??
Menu Navigasi Dropdown adalah Menu untuk mempercantik Blog. Selain itu juga Menu ini dapat memudahkan pengunjung Blog kalian dalam menemukan sesuatu yang ingin dicari, Contohnya mencari Artikel melalui Label, Yang biasanya berada di Sub Menu ( Menu Diatas )..
Masih bingung ?? Nih liat Contohnya ajj !! :
Nah, udah tau kan ??
Okelah, langsung saya beri tahu langkah-langkah untuk memasang menu navigasi dropdownya..
- Login ke Blogger >> klik Tata Letak >> Edit HTML.
- Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap
- Cari Code :
]]></b:skin>
- Copy paste code di bawah ini tepat di atasnya
/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
} - Cari kode berikut
</head>
- Ketikkan code berikut diatasnya
<script>
var auahgelap = '';
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == 'ngumpet') {
if (auahgelap != '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'ngumpet';
}
menu.className = 'muncul';
auahgelap = id;
} else {
menu.className = 'ngumpet';
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != 'ngumpet') {
if (auahgelap == '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'muncul';
}
menu.className = 'ngumpet';
auahgelap = id;
} else {
menu.className = 'muncul';
}
}
</script>
- Cari kode yang mirip kode berikut.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>
- Dibawahnya, ketikkan kode berikut:
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='#'>Home</a></li>
<li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'><a href='#'>Software PC</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>Application</a></li>
<li><a href='#'>Anti Virus</a></li>
<li><a href='#'>Internet Browser</a></li>
<li><a href='#'>Utility</a></li>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Desktop</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Hack Tools</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'><a href='#'>Mobile Software</a>
<div class='ngumpet' id='submenu2'>
<ul>
<li><a href='#'>Application</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Anti Virus</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'><a href='#'>Tips And Tricks</a>
<div class='ngumpet' id='submenu3'>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Computers</a></li>
</ul>
</div>
</li>
<li onmouseout='petakumpet("submenu4")' onmouseover='umpetpetak("submenu4")'><a href='#'>Music</a>
<div class='ngumpet' id='submenu4'>
<ul>
<li><a href='#'>Indo Hits</a></li>
<li><a href='#'>Rock</a></li>
</ul>
</div>
</li>
<li><a href='#'>News Update</a></li>
</ul>
</div>
Keterangan:
* Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
* Anda bisa menambah atau mengurangi menu diatas.
- Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)
- Lihat Hasilnya..
NB: Apabila hasilnya tumpukan dengan menu navigasi bawaan template.. anda bisa menghapus menu navigasi bawaan template tsb..
Oke, selamat mencoba kawan !! ^.^
