Cara Membuat Kotak Like Facebook Melayang

Cara Membuat Kotak Like Facebook Melayang - Kotak Like Facebook Yang umumnya kita temukan biasanya diletakan di Bagian Sidebar Atau Di Bagian Footer, Nah kali ini saya akan berbagi Tips Blog yaitu Cara Membuat Kotak Like Facebook Melayang 




Jika kamu menggunakan Cara ini kan cukup lumayan bisa menghemat tempat, ok langsung aja cara membuat nya.
  • Login Ke Blog Kamu.
  • Pilih Rancangan lalu Pilih Add Gadget.
  • Pilih HTML Java Script.
  • Lalu Copy Kode di Bawah ini.
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCBQY3aBSa7LmkGvwm48eeunNMrJi0eFvIpp1LnE0ZREmM3YJqMHvZbRbcnO77AxoMHFx0msAH1PHYUzKMtxObES26QvO7o-YwbXqpJ7nczmAI1D7Bb2FFKux_U1L9HI6btxh0Y_k7lao/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlazer-Blog%2F193419544081467&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=138085536301890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</center>
</div>

Kode yang berwarna merah adalah contoh kode Kotak Like Facebook yang saya pakai sekarang ganti Kode Yang berwarna Merah dengan Kode Kotak Like Facebook kamu.
Jika Sobat Mendapatkan masalah harap Tinggalkan Pesan Di Kotak Komentar.

Cara Membuat Link

Cara Membuat Link di area artikel, Khusus Blogspot
1. Silahkan anda login seperti biasa ke blogger.com
2. Lakukan posting artikel, klik Entry Baru atau Posting, tulis judul dan isi artikel
3. Sekarang silahkan anda sorot kata atau kalimat yang akan anda buatkan linknya seperti dalam gambar saya sorot Supercross motorcycle racing.
4. Klik di bagian atas area posting artikel menu Link seperti ini( Add or Remove Link ) dan akan keluar window seperti di bawah ini
5. Masukkan di Web Address link url yang akan anda munculkan di artikel lalu klik tombol OK. Jika anda mau link anda bila diklik terbuka window baru / New Window centang saja Open this link in a new window lalu klik OK.
Cara Membuat Link di Side Bar
Membuat link di side bar biasanya digunakan untuk tukeran link atau memasukkan blog blog milik anda yang lain. Siapa tahu anda punya banyak blog di internet dan bisa anda masukkan di side bar. Berikut caranya :
1. Login ke blogger.com
2. Klik Tata Letak/Rancangan.
3. Klik Tambah Gadget
4. Klik menu Daftar Link
5. Isi form di atas sebagai berikut :
•  Judul, Isi judul sesuai dengan selera anda misalnya my blog atau my link atau blog saya yang lain atau blogroll dll.
•  URL Situs baru, isi dengan alamat blog anda, teman anda atau blog saya ( he he he )
•  Nama Situs baru, isi dengan kata atau kalimat yang menggambarkan blog anda misalnya tips blogging.
6. Klik Simpan/Save
Selamat anda sudah bisa membuat link baik di area posting artikel atau di side bar. Harapan saya semoga anda tetap semangat blogging. Be Blogging forever. Oh ya maaf lupa, bagaimana cara membuat link untuk blog WordPress, tunggu di lain waktu ya. Jangan bosan datang ke blog ini.

Cara Menampilkan Jumlah Visitor Yang Online


Untuk menampilkan widget jumlah visitor silahkan baca tutorialnya sebagai berikut :
1. Kunjungi web http://whos.amung.us
2. Memilih atau mengatur tata letak widget.

Teman bisa leluasa dengan mudah mengganti tampilan warna ataupun tempat untuk menempatkan widget tersebut. teman bisa menaruhnya di pojok kanan pojok kiri di samping kanan di samping kiri pokoknya sesuka hati teman deh saya tidak akan melarang kok teman.. hehehe. 
3. Copy paste kode html yang telah tersedia ke blog anda. Caranya :
Untuk Blogspot
1. Login ke blogger.com
2. Tuju ke blog yang akan anda tambahkan lalu klik Rancangan/Tata Letak/Design
3. Klik Tambahkan Widget
4. Lalu klik HTML/JavaScript.
5. Masukkan/paste kode html yang telah anda copy tadi di area HTML lalu klik Save/Simpan.

Untuk Wordpress
1. Login ke member area wordpress lalu klik Widget.
2. Di area Widget Drag/tarik widget “Text” ke side bar. Masukkan kode html yang telah anda copy di area text.
3. Klik Save.

Cara Memasang Live Traffic Feed

  • Klik widgets setelah anda berada di situs tersebut.
  • Klik salah satu pilihan Javascript widget yang anda perlukan.
  • Setelah memilih salah satu dari 4 pilihan disana lalu anda klick "Click here to Customize It!" itu berguna untuk menentukan warna agar sesuai pada blog kita.
  • Selesai mengotak-atik warna, Copy dan Paste ke blog anda dengan cara berikut dibawah ini.
  • ~> Login ke Blogger lalu ke Elemen Halaman dan Tambah gadget di sisi sidebar atau di footer terserah pemilik blog setelah itu pilih HTML/JavaScriptHTML/JavaScript setelah itu paste di dalamnya kode yang telah di copy di atas.
  • Klik simpan dan selesai.
  • Silahkan anda lihat blog anda sekarang

Semoga Berhasil...!!

Cara Mengahpus Header Di Blog

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML


Jangan Lupa Centang Expant Template Widget

Truss cari kode ini

<b:widget id='Header1' locked='true' title='Hacker Indonesia (Header)' type='Header'>


Ubah Menjadi


<b:widget id='Header1' locked='false' title='Hacker Indonesia (Header)' type='Header'>


Save dan selanjutnya ke tata letak,dan hapus deh Headernya


Ini Dari SAYA Sertakan Sumber Klau Ingin Copas

Nb : Ganti  Hacker Indonesia (Header) Menjadi Header Blog Anda

Cara menghilangkan attribution blog

Cara menghilangkan attribution blog,bingung dan sempat ingin untuk menunda menerbitkan artikel ini.Seperti kebiasaan saya ketika membuat artikel,saya selalu meriset dulu keyword atau bahasan yang sering di cari di google.

Setelah fasilitas wonder wheel dihapus oleh google,meriset keyword menjadi lumayan susah bagi saya.Lalu seperti apakah widget attribution blogger itu?

Bila melihatnya di halaman Rancangan blog,maka akan seperti dibawah ini :


Kebetulan beberapa hari yang lalu saya mengganti template dari salah satu blog saya dan di template itu ada widget attribution,seperti inilah terlihatnya jika ketika blog dibuka.Lihat tulisan yang di lingkari garis merah.Disitu tertulis,Didukung oleh blogger.Meskipun kecil namun cukup mengganggu dalam sisi penampilan blog.

Mohon maaf gambarnya saya kecilkan karena gambar aslinya terlalu besar jika kurang jelas,klik kanan pada gambar dan klik open link in new tab.


Nah bila sobat juga ingin menghilangkan attribution blogger seperti yang saya lakukan,caranya mudah dan sangat simpel.

Pertama,masuk ke Rancangan lalu Edit HTML.Kemudian copy dan paste kode ini di atas kode ]]></b:skin>.

#Attribution1 {height:0px;
visibility:hidden;

display:none
}


Sehingga menjadi seperti ini :

#Attribution1 {height:0px;
visibility:hidden;

display:none
}

]]></b:skin>

Jangan lupa klik simpan template.Dan kini widget attribution blogger anda pun sudah hilang.

Cara Membuat Kotak Admin Selalu berada di bawah postingan blog

Kali ini saya akan mencoba mengajarkan juga kepada para pembaca tentang trik dan tips yang ini. Caranya sangat mudah namun sebaiknya kawan-kawan memperhatikan langkah demi langkahnya agar tidak tersesat di jalan ya. hehehehe...

1. Silahkan login ke blogger kalian masing-masing
2. Pilih Rancangan > Edit HTML
3. Berikan centang pada Expand Template Widget
4. Silahkan cari script berikut (gunakan bantuan CTRL+F untuk mempermudah pencarian)
<div class='post-footer'>
5. Copy-paste scipt kotak admin di bawah ini tepat setelah kode di atas

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy31YhfOxPWIfDThkjTxQLNyefqf2h4hEuMbwp1x-XioGDGKGYdC9MXIlteqe28n-QUgJBjSRjuLmo0FOgpV4o02q789FzEkuhLg4luxCQmWyL5iEAl-GYCGIiKopl-He18jLG2o00Ldo/s220/AVATAR+KU-128.jpg'/>
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.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://idris-dehidrasi.blogspot.com/2012/02/cara-membuat-kotak-admin-selalu-berada.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
6. Setelh itu, silahkan cari kode berikut  ]]></b:skin> pada template kawan-kawan
7. Letakkan kode di bawah ini tepat sebelum kode di atas tadi pada nomor 6.
.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
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:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
8. Silahkan ganti text yang berwarna merah untuk merubah deskripsi blog dan URL gambar kawan-kawan.
9. Untuk Jenis font, warna background dan bahkan border pun bisa kawan-kawan ganti sesuai dengan keinginan sendiri
10. Silahkan Preview terlebih dahulu untuk melihat sejenak dan hingga scipt berjalan sesuai mestinya dan dirasa cukup, silahkan klik Save/simpan.

Cara Praktis Membuat Box Link Exchange/Tukar Link

Tidak lepas dari belajar menghias blog,budaya tukar link sangat dibutuhkan dalam dunia blogging/perseoan.
Karena seperti yang anda tahu,semakin banyak inbound link,maka akan semakin baik blog kita di mata search engine/mesin pencari.Ok! biar langsung kelar,kita langsung ke topiknya ya :D
Cara ini sangat sederhana sekali,anda tinggal menempatkan kode yang nanti saya berikan,kedalam Add New Widget/Elemen baru pada Blog anda.Pertama,copy kode berikut ini:

<textarea rows="3" cols="17" style="width: 252px; height: 83px; color: Black; background-color: white;" readonly>&lt;a href="http://pelajaran-blog.blogspot.com/" target="_blank" title="Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;img src="http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/Pelajaran+Blog.gif" border="0" alt="Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;/a&gt;</textarea>

Keterangan:
  • http://pelajaran-blog.blogspot.com/ ganti sesuai dengan alamat blog anda.
  • http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/Pelajaran+Blog.gif gantilah dengan URL Image yang ingin ditampilkan.
  • Pelajaran Blog Cara Membuat Form Link Exchange/Tukar Link. gantilah dengan Diskripsi Blog anda.

Cara Menghilangkan Widget Attribution Blogger


Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {height:0px;
visibility:hidden;

display:none
}


Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Sekian dan terima kasih

Jquery Multi Level Menu Horizontal

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>



.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini


<b:widget id='HTML1' locked='false' title='Pesan' 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code
<b:if cond='data:blog.pageType == data:blog.homepageUrl'>


Untuk menempatkan di halaman Archive saja
<b:if cond='data:blog.pageType == "archive"'>


Untuk menempatkan dihalaman item/posting saja digunakan code
<b:if cond='data:blog.pageType == "item"'>


Dan untuk pada halaman pages atau static page blogger digunakan
<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
<b:if cond='data:blog.url == "URL_HERE"'>


Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Membuat Background Matrix di Blog ..!!

New Post ..!!

Ok Sedot Gan ..!!!



  • Login ke blog sobat.
  • Klik "Design" kemudian klik "Edit HTML".
    Cara Pasang Background Matrix Di Blog
  • Cari kode </Head> kemudian copy-paste kode CSS di bawah ini diatas </Head> .
    <style type="text/css"> body{ background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEintK_tF5bsrcjlQsKVDWHbEEmvN2h57uYQZlaxhf8i5oiAHtd5uqSGD5rtgAKsQD0zF8iUSXniwLf_WrXbbSqwxk8a3Y_bKkeqTNbF4FFwSevxSUuu6rnmFO13Hjrbf_P9sTvG9pBxG6B7/s800/monozcore_blogspot_com_redmatrix.gif ) repeat center center fixed black;
    } </style>
  • Ganti kode yang berwarna merah pada baris kode atas dengan URL gambar animasi matrix yang sobat inginkan.
  • Klik "Save" dan lihat hasilnya...
Animasi Gambar Matrix 
  • 0-1-1 Matrix
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4iIE4Vv5AByBT1nVX1g-8DZpZCdAONcvVEGKq5WQIO41TOinKp4AKAdTNccqN-8UIZx5pxS9tBzj0NR8sOHbsPyAGvhV6PuDKHCqe9YeC7yyscnIWd04lyJ6ki4146gH-5Li4AR_ZaY/s1600/0_1_1.gif
  • Black Red Matrix
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrp_I7yd4JBFeHc_DOmfd7Qkh1r5PJItT8olZt_PMxV6cbsOTvxIvN09sncKzYucfSCADZQ0UorEKQbKICJfkBh001i4yBQrrnMkTSZ2FofqqBSy-iWGX2j-32t-ald98ED8lFSnPCSvPx/s800/black_red_matrix.gif
  • Blue Matrix 1
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwDZpJ7iiJGKvTUayhD2SvaisBAhRQUu1ZHwJc5ekAhOI5XwLl3smmOP4vDlpVUf091fvs7jbgSR7GMqCHp2e3Z8pgUhewwGrGKVIPpVGUKiE0g3Ngu-d3LqM2nYpWteN6vrHjEMUn2Wx1/s800/bluematrix.gif
  • Blue Matrix 2
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThJp69ErFMd2n7u9edIjF4xx4cXK3GIWJ7btHHA4hrAw9LqUYJvVy00GLN_xduGkl9h13Nn2UD1OcSg-TSUTrFjIIWesvK5s7k_UccRLbFdqUbVrapxBKRBbDMg-jKWJM3a9RxdVQ66jQ/s800/bluematrix2.gif
  • Green Matrix
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDwvgVXXivQYbnQbw-NQI_pXlznPVsJWikRt_E9kH0ZvK2yv8GaII7RqHH-jjCea58czJnRYLXOWPHZUa5nOZCehVQON6YnK2zmKYvsjTMSvl4xregI95gYsaZuDI_Of0se0il4Xc2s7hq/s800/matrix.gif
  • Port Listener
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7nOlUc-wDg-CAeC7IVmI8UE97PNlHSABZ0uduw-rEnsFdFB2jytcER7hiVkdI7yYZGqN4g2yF85mq0SDElKytx-KsIdOPLMdbPUTb7TVWNf4Z9-8k2P3Je_KYIm9UIwNfZSa46865-8Ti/s800/port_listener.gif
  • Red Matrix
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEintK_tF5bsrcjlQsKVDWHbEEmvN2h57uYQZlaxhf8i5oiAHtd5uqSGD5rtgAKsQD0zF8iUSXniwLf_WrXbbSqwxk8a3Y_bKkeqTNbF4FFwSevxSUuu6rnmFO13Hjrbf_P9sTvG9pBxG6B7/s800/monozcore_blogspot_com_redmatrix.gif
  • Blue Matrix
    Cara Pasang Background Matrix Di Blog
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp-_1YcQ-B1Lg2VoNulfDEPoqNfXodE0sxwxN0kNQYE4ElLoKSXqMAhtcSe4aS1v6dPmJ9YGIWnm2ZFxcurw4_8zsjuor4a75mjiNI3W4ouD5N6TdJYfqo6RWaD7Jv4HAXaZT0tsw50Q/s800/matrix.gif
Credit :  http://www.muhammad-quraisy88.net/

Membuat Tepi Gambar Bershadow Dengan CSS 3


CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Recent Post Dengan Thumbnail


Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi.
Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini .

Pada menu Dashboard klik menu "Design - > Page Elements"

Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

Dan taruh script dibawah ini kedalamnya.


<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";

imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";

imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";

imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";

imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;

boxwidth = 230;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "transparent";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://sangmerak.blogspot.com/";

</script>

<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "
http://sangmerak.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

Nah kalau sudah tinggal SAVE.

Sekian sobat blogger, semoga tutorial ini dapat anda gunakan dan bermanfaat bagi Anda. Sampai jumpa lagi di lain kesempatan.

Cara Membuat Teks Berjalan di Menu Bar

Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.


Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>
<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";
msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Semoga bermanfaat
 
Design By : Lord Kaisar Blog's ™ , Don't Delete Footer Or Changed,Please Online Peoples