(Backup template terlebih dahulu sebelum berexperiment...!!!)
"Menghilangkan Tulisan Diberdayakan Oleh Bloger"
Untuk menghilangkan tulisan "diberdayakan oleh Blogger", pertama-tama masuk ke dashboard
Blogger. Kemudian pilih menu Template, pilih Edit HTML, pilih Lanjutkan dan centang terlebih
dahulu Expand Template Widget. Nah setelah itu, kamu harus menemukan kode script ]]></b:skin>.
Untuk memudahkan pencarian, selalu gunakan Control+F.
Setelah ketemu, ganti kode script tersebut dengan kode script ini :
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
]]></b:skin>
Kemudian silahkan klik Simpan Template. Silahkan lihat tampilannya, apakah sudah hilang
tulisan "diberdayakan oleh Blogger" nya?
----------------------------------------------------------------------------------------------------------
"Menghilangkan Tulisan Entry Atom"
Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai.
----------------------------------------------------------------------------------------------------------
"Menghilangkan Tulisan Beranda"
Setelah itu cari kode di bawah ini: <data:homeMsg/>
Gunakan pencarian kode dengan menekan Ctrl+f biar lebih mudah dalam mencari kode
Bila sudah ketemu,hapus dan lakukan pratinjau dahulu untuk mengetahui keberhasilannya.
----------------------------------------------------------------------------------------------------------
"Mengganti Scrollbar"
Login ke Blogger
Klik Design > Edit HTML
Pasang kode berikut di atas kode ]]></b:skin>
::-webkit-scrollbar {
height:15px;
width: 15px;
background: #e6e6fa;
}
::-webkit-scrollbar-thumb {
background-color: #1F61DB;
-moz-border-radius: 12px;
border-radius: 12px;
}
#e6e6fa ganti kode warna itu untuk mengganti warna background scrollbar
#1F61DB ganti kode warna itu untuk mengganti warna scrollbar
Klik 'Save Template'
----------------------------------------------------------------------------------------------------------
"Membuat Bingkai Pada Area Widget"
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.
.main-inner .sidebar .widget h2 {
margin-top: 0px;
margin-bottom: 1px;
margin-left-value: 0px;
margin-right-value: 0px;
padding: 3px 3px;
color: #274e13 !important;
text-align: center;
border: 1px solid #666666;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #3d85c6;
background: #bbbbbb;
}
.main-inner .sidebar .widget-content {
margin: 0px;
padding: 2px 2px;
text-align: justify;
text-decoration: none;
border: 1px solid #674ea7;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #3d85c6;
background: #ffffff;
}
.main-inner .widget #ArchiveList {
margin: 0px;
}
.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}
Ketiga, simpan template Anda.
Perlu diketahui bahwa background yang digunakan dalam rangkaian tersebut merupakan warna solid (dalam hal ini adalah #bbbbbb dan #ffffff), sehingga agar tampilannya menjadi seperti gambar di atas maka Anda dapat mengganti kode warna pada background: dengan gambar atau warna gradasi. Sebagai contoh misalnya dengan memakai kode di bawah ini.
Background dengan menggunakan gambar (misalnya untuk judul widget).
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdqhJNcagNhDTBICxu1UpZ7V6gX5ngIsfJHuHMWtAyaei3np1HL6OXy1ClW0tWTWh9zOjI16hS-OYFOYTPKPjypQtOFjsh0MtDQZuIEWaElAd70asUjxcTws9aq5PGghliIy7xnjw2AZE/s800/Menu.png") repeat-x scroll left bottom rgb(243, 244, 246);
Background dengan menggunakan warna gradasi (misalnya untuk area widget).
background: -moz-linear-gradient(center top , white 20%, rgb(243, 243, 243) 100%) repeat scroll 0% 0% transparent;
Demikian halnya untuk warna garis dan warna bayang-bayang, Anda dapat menyesuaikannya dengan desain tampilan halaman blog yang Anda kelola, yaitu dengan cara mengganti kode warna yang terdapat pada border: dan box-shadow:. Dan perlu diketahui pula bahwa kode tersebut dapat diimplementasikan pada semua kategori template standar Blogger (Mudah, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan). Terkecuali untuk kategori template PT Keren Sekali, kode tersebut hanya dapat diterapkan pada desain template yang belum memiliki bingkai pada bagian widget. Karena apabila diimplementasikan pada template dalam kategori PT Keren Sekali yang telah memiliki bingkai pada widget, maka tampilannya malah akan menjadi tidak proporsional.
----------------------------------------------------------------------------------------------------------
"Memberikan Pilihan Warna Background"
tambah gadget,dan copas code berikut pada area widget :
<div class="widget-content">
<center><i><span style="color: #00FF11;">Pilih Warna Background Kesukaan Anda</span></i>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="2" width="290" height="30">
<tbody><tr>
<td onclick="bgChange('#0009FF')" bgcolor="#0009FF">
</td>
<td onclick="bgChange('#FF2AD4')" bgcolor="#FF2AD4">
</td>
<td onclick="bgChange('#2AFF2A')" bgcolor="#2AFF2A">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#000000')" bgcolor="#000000">
</td>
</tr></tbody></table>
</center></div>
----------------------------------------------------------------------------------------------------------
"Membuat Daftar Putar Video Youtube Ala Yahoo"
Copas code widget berikut :
<script type="text/javascript"><br />var YWPParams = <br />{<br />autoplay: false,<br />volume: 100%,<br />defaultalbumart: 'http://somedomain.com/path/someimage.gif'<br />};<br /></script>
<script type="text/javascript" src="https://sites.google.com/site/garudablekokcocc/home/js/swf/yahoo%20media%20player.js"><br /></script><ul type="square">
<li><a href="http://www.youtube.com/watch?v=IXLNdYlE7t0">Nike Ardilla - Meraih Rembulan</a></li>
<li><a href="http://www.youtube.com/watch?v=ACTbZR5theQ">Nike Ardilla - Nyalakan Api</a></li>
</ul>
Ket;
ganti code yg berwarna merah dengan URL youtube.
ganti teks yg berwarna hijau dengan judul video tersebut.
untuk menambahkan video lainya tambahkan code dibawah ini :
<li><a href="URL youtube">judul</a></li>
----------------------------------------------------------------------------------------------------------
Login ke Blogger
Klik Design > Edit HTML
Pasang kode berikut di atas kode </body>
Lalu setelah ketemu letakan code dibawah ini tepat di atas code </body>
<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}
img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}
input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>
----------------------------------------------------------------------------------------------------------
Pertama-tama kunjungi situs penyedia disini,<script type="text/javascript"><br />var YWPParams = <br />{<br />autoplay: false,<br />volume: 100%,<br />defaultalbumart: 'http://somedomain.com/path/someimage.gif'<br />};<br /></script>
<script type="text/javascript" src="https://sites.google.com/site/garudablekokcocc/home/js/swf/yahoo%20media%20player.js"><br /></script><ul type="square">
<li><a href="http://www.youtube.com/watch?v=IXLNdYlE7t0">Nike Ardilla - Meraih Rembulan</a></li>
<li><a href="http://www.youtube.com/watch?v=ACTbZR5theQ">Nike Ardilla - Nyalakan Api</a></li>
</ul>
Ket;
ganti code yg berwarna merah dengan URL youtube.
ganti teks yg berwarna hijau dengan judul video tersebut.
untuk menambahkan video lainya tambahkan code dibawah ini :
<li><a href="URL youtube">judul</a></li>
----------------------------------------------------------------------------------------------------------
"Menambahkan Emoticon Pada Kotak Komentar"
Login ke Blogger
Klik Design > Edit HTML
Pasang kode berikut di atas kode </body>
Lalu setelah ketemu letakan code dibawah ini tepat di atas code </body>
<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}
img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}
input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>
"Membuat Menu Chat Seperti Facebook"
lalu lakukan pendaftaran pada situs penyedia tersebut,
setelah itu copas code yg diberikan pada area widget,
dan lihat hasilnya.....
----------------------------------------------------------------------------------------------------------
"Gambar Berputar Dan Membesar Saat Disorot Mouse"
1. Login terlebih dahulu ke Blogger
2. Selanjutnya Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode </head>
5. Copy kode dibawah ini dan letakan tepat diatas kode </head>
<style>#garuda
img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s
ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s
ease-in-out;transition:all .8s ease-in-out;} #garuda img:hover{
-o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5)
rotate(360deg); -webkit-transform: scale(1.5)
rotate(360deg);}</style>
6. Setelah itu Simpan template
Selanjutnya untuk bisa menampilkan Gambar Berputar Dan Membesar Saat Disorot Mouse,
sahabat copy kode dibawah ini pada halaman posting maupun sidebar blog.
<div id="garuda"><img src="KODE GAMBAR" /></div>
"Frame Iklan Melayang Dengan Tombol Close"
Salin script dibawah ini kedalam area widget :
<style type="text/css">
#gb{
position:fixed;
top:5px;right:5px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border: 3px dashed red; background: #005af5;
background:blue;
padding:10px;
}
</style>
<script src="https://sites.google.com/site/garudablekokcocc/home/iklan%20melayang%20garuda%20black%20boy.js" type="text/javascript"></script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
tutup</a>
</div>
<center>
<a href="http://garudablackboy.blogspot.com/p/status-wall-fb-via-unik.html" target="_blank"><img src="http://i1195.photobucket.com/albums/aa398/maftuhi/selamat-datang_zps872759d8.png"width="auto"/></a></center>
</div></div>
Ket :
Ganti code yg berwarna biru dengan iklan sobat.
----------------------------------------------------------------------------------------------------------
"Script Chatbox Melayang"
Untuk mendapatkan code chatbox daftar disini
setelah mendapatkan code chatbox,gabungkan dengan code dibawah ini :
<div class='header section' id='header2'><div class='widget HTML' id='HTML5'>
<div class='widget-content'>
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnF24BcB5e0XMlE5kDufo0wm6wjaVUc8ujaAe4WYcVMTZBzpxIMF8pCEbsOumLhiEQ-W877fjFMVQ1h8TE_UW_VqqVIV6L2tUpJF6rTBnplgKs-cKDto4PlDpulqV3OczXTMA9yK1aSXtY/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=690523&boxtag=1svlbl&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-690523" style="border:#ababab 1px solid;" id="cboxmain7-690523"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=690523&boxtag=1svlbl&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-690523" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-690523"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-300-at.offsetWidth).toString() + "px";
</script>
<div style="position: fixed; top: 40px; left: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://zuazz.googlecode.com/files/chatbox.gif" alt="cbox" title="Click here to open Guest Book"/></a></div></div></div></div>
Ket :
Ganti code yg berwarna hijau dengan script chatboxmu.
Dan untuk letaknya ganti code yg berwarna biru.
----------------------------------------------------------------------------------------------------------
"MEMBUAT SLIDESHOW IMAGE SCROLL"
<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;"><marquee direction="left" scrollamount="2" width="100%">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFWsyglpr55H5nDeK0cDArnPXneX6DOPmC-gsMptAiZimTvRv38bQIhT3sPPIoRqmgAAXFV4EbfwEZ8x8QhrZjlq0zGVF9AvlszDKxP1fdBt_IBMsdFcRCXVRtmPj90HlBMRNsXxW/s320/My2.jpg" height="100" />
<img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash3/8769_473423132709336_747680834_n.jpg" height="100" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mzTmEeU2ZMN-MFMIHiNQtsUBRrT0GMMcbrKNGd7iOWioCxt3vTSHDTtj5t1C7ypAVJqLV_CfucpHRbz0nz6OyYSBWsiaz0rUAXVuyXfIkQyjbwQDuTrNpNvkM0UeR8j7rOGz1Ir4/s320/My4.jpg" height="100" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYXfWSg3qNs-tT4RoD3wqn32sQIhAfQ7VTILFGODBc0SB2JNBmDvgOfchXKOfb_FED7tqztNV2mMDwQFrL2WbAGURCdvn0d_hudA299kzNBJehq7u8MnGZwKw0VtTmdSKsTrAfu_C/s320/My1.jpg" height="100" />
<img src="http://i1357.photobucket.com/albums/q759/Jacky_Putra_Garuda/Facebook/My/28052_479505648767751_1552085611_n.jpg" height="100" />
<img src="http://i1357.photobucket.com/albums/q759/Jacky_Putra_Garuda/Facebook/My/133318_479505722101077_1707140678_o.jpg" height="100" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZ7bP300gjymhMzxEFLbH0tH35wTMKmQpxG9TnPSJ8xN9wFbao_Kr9oxFMoZBiC2-cHfeAKfxxz_ivML-g5do89Dg_1RVOmxROlyuiX9oE3xMcAgyDxzD7E5EFgv4lrZhyphenhyphen_ONOxL_/s200/6242507002_f1848db3f7_z.jpg" height="100" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpad6uuys359V_GhKtNcIjF2hVCq1yDI78Uq4EBaILU5X0L4nvTAvaEIhfkXT4Toxlfb4rG7w3mrH49o7FL5d6ziz_mIE12fYnyIXXA-2_SkPwzfexVXPK9a7VAaqGMAI4Og-1d-7q/s200/nike3.jpg" height="100" />
<img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/604138_473423639375952_1248839842_n.jpg" height="100" />
</marquee></div>
----------------------------------------------------------------------------------------------------------
"TOMBOL SHARED MELAYANG"
<style>
#pageshare {position:fixed; bottom:26%; left:5px; float:left; border: 5px solid red; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:10px;background-color:black;padding:5px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:50px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:48px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:5px 5px 5px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class="fb-send" data-href="http://garudablackboy.blogspot.com/p/status-wall-fb-via-unik.html"></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div></div>
----------------------------------------------------------------------------------------------------------
"MACAM-MACAM BORDER"
Salin contoh script border dibawah ini dan sesuaikan bentuk border:
<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;">CODE WIDGET</div>
Ket:
code warna hijau adalah jenis border.
code warna biru adalah warna border.
contoh border:
----------------------------------------------------------------------------------------------------------
"Fly-Out Menu"
lalu extrack dan ikuti petunjuk yg terdapat pada readme.
----------------------------------------------------------------------------------------------------------
"MENU DROPDOWN TANPA EDIT HTML"
Nah bagi sobat yg ingin menambahkan menu dropdown dan tanpa mengedit html,sobat hanya perlu memasukan code widget ini kedalam halaman widget silahkan salin widget berikut:
code;
Selamat berexperiment...
