
Widget merupakan “kode portabel ( biasanya DHTML, JavaScript atau Adobe Flash ) yang dipasang diinstall, atau sederhananya, copy paste pada suatu halaman web, yang memiliki suatu fungsi tertentu dan menjadi suatu bagian dalam halaman web tersebut.”
istilah lain untuk widget : gadget, badge, module, webjit, capsule, snippet, mini, flake, application.
QYang ingn saya share kali ni adalah cara menampilkan widget pada halaman tertentu.
Untuk mengetahui kode widget dalam edit template,caranya:
1. Lgin blog
2. Masuk ke template
3. cari kode <div id='sidebar-wrapper'>
dibawah kode tersebut ada kode html dari widget yang sbat pasang
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='ash blog='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Recent Comment' type='HTML'/>
</b:section>
</div>
yang saya tandai warna merah adalah kode html dan yang berwarna oranye adalah judul widgetnya.
sekarang di halaman mana widgetyang ingin sobat tampilkan?
berikut ini script kode lengkap kap..:D/
1. Menampilkan widget hanya di halaman depan saja (homepage).
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>
2. Menampilkan di semua halaman kecuali homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>
3. Menampilkan widget hanya di halaman Archive saja.
<b:if cond='data:blog.pageType == "archive"'>
......................................................
</b:if>
4. Menampilkan widget di semua halaman kecuali halaman archive.
<b:if cond='data:blog.pageType != "archive"'>
......................................................
</b:if>
5. Menampilkan widget hanya di halaman posting.
<b:if cond='data:blog.pageType == "item"'>
......................................................
</b:if>
6. Menampilkan widget di semua halaman, kecuali halaman posting.
<b:if cond='data:blog.pageType != "item"'>
......................................................
</b:if>
7. Menampilkan widget hanya di postingan tertentu saja.
<b:if cond='data:blog.pageType == "alamat-postingan"'>
......................................................
</b:if>
8. Menampilkan widget selain di postingan tertentu.
<b:if cond='data:blog.pageType != "alamat-postingan"'>
......................................................
</b:if>
9. Menampilkan widget hanya di halaman staticpages.
<b:if cond='data:blog.pageType == "static_page"'>
......................................................
</b:if>
10. Menampilkan widget di semua halaman,kecuali halaman staticpages.
<b:if cond='data:blog.pageType != "static_page"'>
......................................................
</b:if>
misal sobat ingin menamplkan widget recent comment dan ingin menampilkan pada seluruh halaman post kecuali homepage.
1. buka edit template sobat
2. Centang expand widget template
3. cari kode recent comment atau kode htmlnya "html3" yang saya contohkan di atas.
kode yang seperti ini:
<b:widget id='HTML3' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
sisipkan kode scriptnya dibawah <b:includable id='main'> dan tutup dengan </b:if> yang d letakkan dibawah </div>
sehingga kode nya menjadi seperti ini
<b:widget id='HTML3' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Langkah terakhir adalah save template dan selesai.
Mudheng atau Mubeng sob?:D
Semoga tutorial dari saya cukup jelas, jikalau sobat ada yang kurang mengerti dapat reply di kotak komentar.
Demikian Cara Menampilkan Widget pada Halaman tertentu pada Blog, semoga bermanfaat.

Jika sobat merasa terganggu dengan adanya link Subscribe to: Post Comments (Atom).
Sobat dapat menghilangkannya dengan cara berikut ini:
1. Login blog
2. Template
3. Edit html dan centang expand widget template
4. Hapus kode
<b:include data='feedLinks' name='feedLinksBody'/>
5. Ganti dengan kode
<!--<b:include data='feedLinks' name='feedLinksBody'/>-->
6. Simpan template dan lihat hasilnya.
Mudah bukan cara menghilangkan Subscribe to: Post Comments (Atom) Pada Blog?
Semoga infonya bermanfaat.
Widget melayang kita gunakan biasanya untuk meletakkan script kode iklan atau
widget greeting welcome pada blog.
Apabila sobat kesulitan untuk membuatnya,
Simak berikut ini caranya:
1. Login blog
2. Rancangan
3. Add gadget "html/javascript"
4. Letakkan kode script
<div style="position: fixed; bottom: 0px; right: 10px;width:150px;height:130px;">Masukan kode Widget sobat disini</div>
Atur position ,height dan width sesuai dengan widget sobat.
5. Simpan template dan selesai.
Demikian cara membuat widget melayang pada blog.
Semoga tutorialnya bermanfaat.
Apa sih hot news?
Hot news tuh postingan terakhir dari suatu blog sob.
Bisa berjumlah 10 postingan terakhir atau 5 postingann terakhir.
Kita dapat membuat sesuka hati, dengan cara berikut ini:
1. Login blog
2. Rancangan
3. Edit html dan centang "expand widget template"
4. Letakkan kode berikut di atas </head>
<style type='text/css'>#bd {float:bottom;font-family:Arial, Helvetica, sans-serif;line-height:1.5;margin-top:5px;font-size:12px}.text {color:#98BF2F;margin-left:8px}div#news-1 .gk_news_highlighter {font-family:Verdana, Arial;font-size:11px;color:#666}div#news-1 {width:960px;height:24px;margin-left: -10px;display:scroll;position:fixed;bottom:1px;border-top:1px solid #CCC;border-bottom:1px solid #CCC;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYitVjbbCQJxjEN5Sub6yehOm7BKQCDgBntJ_X5L5KlcbSke02_lT2_iarGi1IVhjrmSYoK-b5jw31yFrkXjpCt9kJiZgIQORbysYI1WNL_dSdyfgoPtzAoWKHgwFxG7QB4LOb-xUPNNHn/s320/gradient.png) repeat-x 0 -100px;clear:both;overflow:hidden}div#news-1 .gk_news_highlighter_wrapper {float:left;width:820px;height:24px;line-height:24px;overflow:hidden;position:relative}div#news-1 .gk_news_highlighter_item {width:auto;height:24px;padding-left:20px;display:none;position:absolute}div#news-1 .nowrap {white-space:nowrap}div#news-1 .gk_news_highlighter_title {padding-left:5px}div#news-1 .gk_news_highlighter_desc {padding-right:5px}div#news-1 .gk_news_highlighter_interface {float:left;width:120px;height:24px;text-align:right;line-height:24px;z-index:1000}div#news-1 .gk_news_highlighter_interface .text {float:left;display:block;width:auto;padding-left:5px;font-weight:700}div#news-1 .gk_news_highlighter_interface div {width:30px;float:right}div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {cursor:pointer;width:13px;height:24px;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3NLoqDK6wPnnFLBkL73S1BNcz-rSKiodUm4X7r_LU3VDZCnrSF-u8fKxgYcOzy7Jc4sd6T5C34HXdZmNk0Sbc3DvyPXI8_pepIxTPxMRDZ69JhBNFt8uUbP_l0JPA3EjxMcDs1PyMIc/s1600/play.png') no-repeat 0 50%;float:left}div#news-1 .gk_news_highlighter_interface a:hover.prev {background-position:-13px 50%}div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {color:#FFF}div#news-1 .gk_news_highlighter_interface a.next {float:right;background-position:-26px 50%}div#news-1 .gk_news_highlighter_interface a:hover.next {background-position:-39px 50%}</style>
5. Letakkan kode berikut dibawah <div id='content-wrapper'>
<div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = "http://www.cybermig.com/";
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>
6. Simpan template dan lihat hasilnya.
Seperti pada aturan iklan kumpulblogger.com yaitu dapat menggunakan
iklan melayang tetapi dengan tombol close 1x klik.
Berikut kode yang harus di tambahkan pada script iklan:
<style type="text/css">#gb{position:fixed;top:10px;z-index:+1000;}* html #gb{position:relative;}.gbcontent{float:right;background:transparant;padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"><div style="text-align:left"><a href="javascript:showHideGB()">[Close]</a></div><center>KODE SCRIPT IKLAN</center><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script></div></div>
Letakkan di rancangan add gadget "html/javascript" blog sobat
Jangan lupa simpan ..
Selamat mencoba.

Jika kita ingin mengubah background iklan kumpul blogger,
untuk menyesuaikan dengan warna template blog sobat,
berikut ini caranya:
di bawah ini script iklan
<script src="http://kumpulblogger.com/scahor.php?b=180202&onlytitle=1" type="text/javascript"></script>
modif menjadi seperti ini:
<div class='widget-content'>
<center><div style="background:red;
rgb(204, 204, 204); padding: 3px 3px 5px; text-align: left;"> <script src="http://kumpulblogger.com/scahor.php?b=180202&onlytitle=1" type="text/javascript"></script>
</div></center>
</div>
hasilnya:
ubah warna background sesuai keinginan ya..
Apabila sobat penasaran, modifikasi chatbox show hide.
Mending praktekin deh..
Caranya berikut ini:
1. Login blog
2. Rancangan
3. Add gadget "html/javascript"
4. Copast kode berikut
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active"); return false;});});</script><style>/* ---------------Simple Slide panel with jQuery---------------------------------- */#panel {height: auto;background:#000;width: auto;display: none;padding: 7px;border: #0C0;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}.slide {margin: 0;padding: 0;border-top: solid 4px #f90;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaL7WhL2Lm5raYVCfo_bBCrOBRdv5xPFhUGCRfxFxlbsX6V-n4IQ0N4_l47nqq-JTxc_ncRQEHAuC2fYB-FYDddAOCnq-iwwVdoB1xoLkKp17TJSTSl0CzHT0aMchh9_gz6P61CDuH4FE/s1600/btn-slide.png) no-repeat center top;}.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4r_5TOBSlbwmJWMb765Vw740BVYDvPq8lfdkEAz5FB3IA1Cm7XrczeVHJJVvzmofSpksVu0f0EkVBvFci_1kas2cZ1m3C3z_yh7F0fkdYuClgTA5VTknlbL4mwy-pAk34ag6mLbBC-KA/s1600/white-arrow.gif) no-repeat right -50px;text-align: center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}.active {background-position: right 12px;}</style><div id="panel">Kode Cbox Disini</div><p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>
5. Save
Selamat mencoba.
Semoga tutorial tentang cara membuat slide chatboxnya bermanfaat.
Apabila sobat sepert apa kotak admin di bawah postingan blog,
Contoh gambar berada di atas tuh.
So bagaimana cara membuatnya?
Begini:
1. Login blog
2. Rancangan
3. Edit html dan centang expand widget template
4. Letakkan kode berikut di atas ]]></b:skin>
.admin-tulisan{display:block;width:auto;background:#1E1E1F;border:2px solid #333;box-shadow:0 1px 3px #000;-moz-box-shadow: 0px 0px 10px #292929;-webkit-box-shadow: 0px 0px 10px #292929;box-shadow: 0px 0px 10px #292929;;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#D9D9D9;}.admin-tulisan .kontainer{padding:5px;}.admin-tulisan h4{background:#4733FF;border:none;border-bottom:1px solid #699019;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#FEEA83;}.admin-tulisan img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#2E2E2E;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
Ganti warna kotak admin sesuai keinginan
5. Letakkan kode berikut di bawah <data:post.body>
<b:if cond='data:blog.pageType == "item"'><div class='admin-tulisan'><h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ www.cybermig.com</h4><div class='kontainer'><img src='http://dl3.glitter-graphics.net/pub/1246/1246493ere9f5q4uj.gif'/>Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.<div style='clear:both;'/></div></div></b:if>
Ganti kode berwarna merah dengan gambar dan url sobat
6. Simpan template
Demikian cara membuat kotak admin di bawah postingan blog.
Semoga tutorialnya bermanfaat.

Jika sobat blogger tidak menyukai tulisan powered by blogger yang berada pada paling bawah blog.
Maka berikut ini cara menghapusnya:
1. Login blog
2. Rancangan
3. Edit html dan centang expand widget template
4. Letakkan kode berikut di atas kode ]]></b:skin>
#Attribution1 {5. Simpan
height:0px;
visibility:hidden;
display:none
}
Mudah bukan cara menghapus atribut powered by google?
Monggo di coba, semoga infonya bermanfaat.

Jika sobat kurang nyaman dengan link Langgan:entri(atom),
kita dapat menghapusnya dengan cara berikut ini:
1. Login blog
2. Rancangan
3. Edit html dan centang "Expand Template Widget"
4 Letakkan kode berikut di atas Kode ]]></b:skin>
.feed-links{display:none;}
5. Klik Simpan Template.
Lihat hasilnya.
lJika sobat blogger belom jelas seperti apa widget yang di sentuh akan terbuka dengan sendirinya,
lihat contoh widget di bawah ini:
Detailnya seperti ini:
Like Us
Like Us
Detailnya seperti ini:
<div class="systemBox"><h2> Like Us </h2><center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-Zona-Mig33-internet%2F327653677253564&width=300&height=300&colorscheme=dark&show_faces=true&border_color=ff0000&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowtransparency="true"></iframe></center><h3>Like Us</h3></div><style>.systemBox {background:transparent;width:270px;height:50px;overflow:hidden;padding:5px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;-moz-box-shadow: 0 0 5px hsla(0,93%,9%,.7);-webkit-box-shadow: 0 0 5px hsla(0,93%,9%,.7);box-shadow: 0 0 5px hsla(0,93%,9%,.7);margin:0 auto;}.systemBox p {-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;padding-top:20px}.systemBox:hover {background:transparent;height:100%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-moz-box-shadow: 0 0 5px blue;-webkit-box-shadow: 0 0 5px blue;box-shadow: 0 0 5px blue;}.systemBox:hover h2 {margin-top:-60px;}.systemBox:hover h3 {margin-top:50px;padding:5px;text-align:center;font-size:20px;}.systemBox h2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnk0UMOTHaOtmz2VIxR5oPldPLmcAecfc_3nbNHsAPYW8-gl-4joIq2ITEOgmvKPnqWuh6Q31HqOFW7G2zzJnBNtJsPN7lexthUp7acrOJL3Xbu_y77a-LuMvis8iIlmLyQ7-MrXcbjvk/) 0 0 no-repeat;color:black;height:28px;padding:5px;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);box-shadow: 0 0 7px hsla(33,50%,43%,.8);-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}.systemBox h3 {margin-top:-195px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnk0UMOTHaOtmz2VIxR5oPldPLmcAecfc_3nbNHsAPYW8-gl-4joIq2ITEOgmvKPnqWuh6Q31HqOFW7G2zzJnBNtJsPN7lexthUp7acrOJL3Xbu_y77a-LuMvis8iIlmLyQ7-MrXcbjvk/) 0 0 no-repeat;color:black;height:28px;padding:5px;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);box-shadow: 0 0 7px hsla(33,50%,43%,.8);-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}</style>
Teks berwarna yang harus sobat ganti.
Demikian cara membuat widget jika di sentuh akan terbuka pada blog atau sobat blogger lain menyebutnya dengan efek elastis.
Semoga tutorialnya bermanfaat.