IT'S MAGIC

Jumat, 22 Juni 2012

Cara membuat Widget Klasemen Liga Domestik di Blog

Mau Blog kamu punya tabel Klasemen Liga-liga ternama? Pada pembahasan kali ini ,saya memberikan kode klasemen liga-liga domestik ternama yang tidak perlu capek-capek anda edit setiap saat,disponsori oleh soccerway.com

Langsung saja ke intinya,caranya :

Anda tinggal Copy Paste kode berikut di Laman atau Postingan anda

Liga Inggris (Barclay Premier League)

<iframe frameborder="0" height="700" marginheight="0" marginwidth="0" scrolling="no" src="http://widgets.soccerway.com/widget/free/classic/competition/8/660#d=450x700&f=table,table_colmp,table_colmw,table_colmd,table_colml,table_colgf,table_colga,table_colgd,results,fixtures,weekdays,scroll&cbackground=FFFFFF&ctext=000000&ctitle=F85F00&cshadow=E8E8E8&cbutton=C0C0C0&cbuttontext=000000&chighlight=FF0000&tbody_family=Tahoma,sans-serif&tbody_size=9&tbody_weight=normal&tbody_style=normal&tbody_decoration=none&tbody_transform=none&ttitle_family=Impact,sans-serif&ttitle_size=13&ttitle_weight=normal&ttitle_style=normal&ttitle_decoration=none&ttitle_transform=none&ttab_family=Tahoma,sans-serif&ttab_size=9&ttab_weight=normal&ttab_style=normal&ttab_decoration=none&ttab_transform=none" width="450"></iframe>

Liga Spanyol (Liga Primera Spanyol)

Liga Italia (Serie A Italia)

Liga Perancis (Ligue 1)

Liga Belanda (Eredivisie)

Liga Prima Indonesia (IPL)

Liga Super Indonesia (ISL)

Save dan Lihat hasilnya,sponsored by : soccerway

Baca Selengkapnya...

Kamis, 21 Juni 2012

Cara membuat Energy Saving Mode di Blog (Update)

Saya sudah membahas cara membuat Power Saving Mode di Postingan sebelumnya.
Kali ini adalah Update-nya,keunggulannya adalah kita dapat menambahkan gambar
untuk menghiasi Power Saving Mode.

Preview

1. Log in Blogger

2. Tata Letak/Layout

3. Pilih add gadget,HTML/Javascript

4. Copy Paste kode berikut

<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLUbyGiWkdp48ncc_R4fowXD3uCiI183BOGdIQF_digPNGoyF94h8XsNA3YfbNZXiieM2Clw3GQ99jd6HAdIz7DHFKDa8riLfQ-owA7Q95mIndtRoA02u5z3K4naEe3-k3VGjOaVcAQV9/s640/catsdvdfsd.jpg) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>

Ganti kode berwarna merah dengan kode Gambar yang ingin kamu pasang
( Disarankan Gambar yang ingin dipasang memiliki background berwarna hitam ,agar terlihat seperti
preview diatas )

5. Simpan dan Lihat Hasilnya

Baca Selengkapnya...

Cara membuat Widget hanya terlihat di label tertentu

Terkadang,kita ingin menampilkan suatu widget hanya di pencarian label tertentu agar tampilan web terlihat lebih professional. Kali ini,saya akan membahas Cara membuat Widget hanya terlihat di label tertentu.

Preview

Ikuti cara berikut :

1. Log in ke Blogger

2. Centang "expand Template Widget"

3. Cari Kode "Widget id" atau nama Widget

Contohnya yang akan di tampilkan hanya di label tertentu adalah widget"Euro Countdown", tekan

f3 untuk mempermudah pencarian, masukkan nama widget tersebut, maka yang akan muncul kode

seperti di bawah ini:

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML12' locked='false' title='Euro Countdown' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

4. Tambahkan kode berikut di bawah kode <b:includable id='main'> (kode berwarna hijau)

<b:if cond='data:blog.url == "http://thegunnersspirit.blogspot.com/search/label/Euro"'>

ubah kode berwarna merah dengan alamat pencarian label kamu.

5. Tambahkan kode </b:if> diatas kode </b:includable> (kode berwarna abu-abu)

Sehingga hasilnya akan menjadi seperti ini

<b:include name='quickedit'/>

</b:includable>

</b:widget>

<b:widget id='HTML12' locked='false' title='Euro Countdown' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == "http://thegunnersspirit.blogspot.com/search/label/Euro"'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

6. Simpan /Save kode

7. Lihat Hasilnya

Sekian Tutorial dari saya,semoga bermanfaat .TERIMA KASIH

Baca Selengkapnya...

Minggu, 10 Juni 2012

Cara membuat Related Post dengan Linkwithin

Langsung aja tanpa basa-basi ikuti cara ini

1. Login Blogger

2. Pilih Tata letak/Layout

3. Add Gadget, HTML/Javascript

4. Masukkan Kode Berikut

------------------------------------------------------------------------------------------------------------

var linkwithin_site_id = 1312491;

</script>

-------------------------------------------------------------------------------------------------------------

5. Setelah itu Simpan,dan Letakkan posisi Gadget tepat dibawah Gadget 'Post' di Tata Letak

6. Simpan Pengaturan

Baca Selengkapnya...

Sabtu, 09 Juni 2012

Cara membuat Energy Saving Mode di Blog

Salah satu cara membuat blog anda menjadi seperti blog profesional adalah dengan cara membuat Energy Saving Mode.

Berikut Previewnya

Ikuti langkah-langkah berikut:
1. Login ke akun Blogger anda.
2. Pilih Design >> Edit HTML
3. Cari kode </head>
4. Masukan kode berikut tepat di atasnya.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=100' type='text/javascript'/>

5. Save dan semoga Berhasil

NB : Ganti angka yang bercetak merah sesuai keinginan anda berapa lama tampilan itu akan muncul (Satuan Menit).

BARU....UPDATE

Baca Selengkapnya...

Rabu, 30 Mei 2012

Cara membuat Slideshow postingan di Blog

Hai,kawan...kali ini saya akan memberi tahu cara membuat Slideshow postingan di Blog.
Langsung saja ke Topik.

Lihat Previewnya

1. Login ke Blogger

2. Klik Tata Letak atau Layout

3. Pilih add gadget,lalu HTML/Javasript

4. Masukkan kode Berikut :

Catatan : Kode diatas jangan diubah

6. Simpan Gadget,dan lihat hasilnya

Baca Selengkapnya...

Selasa, 29 Mei 2012

Cara memasang Widget Animasi Di Pojok Blog

Animasi di pojok blog merupakan salah satu penghias Blog yang sangat menarik perhatian para pengunjung blog,kali ini saya akan membahas cara untuk membuatnya.

Berikut adalah bagaimana cara memasang widget animasi di sisi blog.

1.Login ke akun blogger sobat
2.Klik menu Tata Letak
3.Klik Tambaha Gadget
4.Klik/Pilih HTML/Javascript
5.Masukan kode di bawah ini ke dalamnya

<div style="position: fixed; bottom: 68px; left: 19px;width:110px;height:80px;"><a href="http://dennismyworld.blogspot.com/2012/05/cara-memasang-widget-animasi-di-pojok.html"target="_blank"><img src="http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/arsenal.gif"alt="gambar"title="Mau Gadget Sperti ini? Kunjungi Blog It's Magic"/></a></div>

(Jangan Copy yang ini!! Keterangan :
Ubah Direct Link yang berwarna Merah dengan Direct Link Animasi yang kamu inginkan)

6. Simpan Gadget,dan lihat hasilnya

Berikut beberapa sampel Direct Link Animasi2 yang menarik :

http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/arsenal.gif

http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/chelsea.gif

http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/mu.gif

http://i1000.photobucket.com/albums/af129/SuNeZ01/3dlogo/roma.gif

Jika Ingin Lebih banyak sampel Animasi, Klik Disini
Semoga Info ini membantu,Terima Kasih

Baca Selengkapnya...

Cara membuat Kotak Slide Postingan Simple blog

Ikuti langkah-langkah berikut :

1. Login ke Blogger

2. Klik Tata Letak atau Layout

3. Pilih add gadget,lalu HTML/Javasript

4. Masukkan kode Berikut :

.gfg-root {

width : 100%;

height : auto;

position : relative;

overflow : hidden;

text-align : center;

font-family: "Arial", sans-serif;

font-size: 20px;

border: 1px solid #BCCDF0;

}

.gfg-title {

font-size: 24px;

font-weight : bold;

color : #FFFFFF;

background-color: #000000;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

}

.gfg-title a {

color : #3366cc;

}

.gfg-subtitle {

font-size: 20px;

font-weight : bold;

color : #3366cc;

background-color: #E5ECF9;

line-height : 1.4em;

overflow : hidden;

white-space : nowrap;

margin-bottom : 0px;

}

.gfg-subtitle a {

color : #3366cc;

display:none !important;

}

.gfg-entry {

background-color : white;

width : 100%;

height : 6.9em;

position : relative;

overflow : hidden;

text-align : left;

margin-top : 3px;

}

/* To allow correct behavior for overlay */

.gfg-root .gfg-entry .gf-result {

position : relative;

background-color : white;

width : auto;

height : 100%;

padding-left : 20px;

padding-right : 5px;

}

.gfg-list {

position : relative;

overflow : hidden;

text-align : left;

margin-bottom : 5px;

display:none !important;

}

.gfg-listentry {

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

-o-text-overflow : ellipsis;

padding-left : 15px;

padding-right : 5px;

margin-left : 5px;

margin-right : 5px;

}

.gfg-listentry-odd {

background-color : #F6F6F6;

}

.gfg-listentry-even {

}

.gfg-listentry-highlight {

background-image : url('garrow.gif');

background-repeat: no-repeat;

background-position : center left;

}

* FeedControl customizations.

.gfg-root .gfg-entry .gf-result .gf-title {

font-size: 24px;

line-height : 1.2em;

overflow : hidden;

white-space : nowrap;

text-overflow : ellipsis;

-o-text-overflow : ellipsis;

margin-bottom : 2px;

}

.gfg-root .gfg-entry .gf-result .gf-snippet {

height : 3.8em;

color: #000000;

margin-top : 3px;

}

* Easy way to get horizontal mode, applicable via js options to gadget.

.gfg-horizontal-container {

position : relative;

}

.gfg-horizontal-root {

height : 1.5em;

_height : 100%;

position : relative;

white-space : nowrap;

overflow : hidden;

text-align : center;

font-family: "Arial", sans-serif;

font-size: 13px;

border: 1px solid #AAAAAA;

padding : 5px;

margin-right : 80px;

}

.gfg-horizontal-root .gfg-title {

font-weight : bold;

background-color: #FFFFFF;

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

float : left;

padding-left : 10px;

padding-right : 12px;

border-right: 1px solid #AAAAAA;

}

.gfg-horizontal-root .gfg-title a {

color : #444444;

text-decoration : none;

}

.gfg-horizontal-root .gfg-entry {

width : auto;

height : 1.5em;

position : relative;

overflow : hidden;

text-align : left;

margin-top : 0px;

margin-left : 0px;

padding-left : 10px;

}

/* To allow correct behavior for overlay */

.gfg-horizontal-root .gfg-entry .gf-result {

position : relative;

background-color : white;

width : 100%;

height : 100%;

line-height : 1.5em;

overflow : hidden;

white-space : nowrap;

}

.gfg-horizontal-root .gfg-list {

display : none;

}

* FeedControl customizations.

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,

.gfg-horizontal-root .gfg-entry .gf-result .gf-author {

display : none;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {

color: #0000cc;

margin-right : 3px;

float : left;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {

float : left;

}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,

.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {

display : block;

color: #AAAAAA;

}

.gfg-branding {

white-space : nowrap;

overflow : hidden;

text-align : left;

position : absolute;

right : 0px;

top : 0px;

width : 80px;

}

.gfg-collapse-open, .gfg-collapse-closed {

background-repeat : no-repeat;

background-position : center;

cursor : pointer;

float : right;

width : 17px;

height : 20px;

}

.gfg-collapse-open {

background-image : url('arrow_open.gif');

}

.gfg-collapse-closed {

background-image : url('arrow_close.gif');

}

.gfg-collapse-href {

float : left;

}

.clearFloat {

clear : both;

}

#feedGadget {

margin-top : 5px;

margin-left: auto;

margin-right: auto;

width : 500px;

font-size: 10px;

color: #9CADD0;

}

</style>

type="text/javascript"></script>

function showGadget() {

var feeds = [

{title:'title',

url:'http://thegunnersspirit.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',

{numResults : 1000, stacked : true,

title: "Recent News"});

}

google.load("feeds", "1");

google.setOnLoadCallback(showGadget);

</script>

<div id="feedGadget">Masih Proses, Mohon Sabar :D</div>

<div id="feedGadget"><a href="http:// thegunnersspirit.blogspot.com" target="_blank"></a>Sponsored By :<a href="http://dennismyworld.blogspot.com/2012/05/cara-membuat-kotak-slide-postingan.html" target="_blank">It's Magic</a>.</div>

Catatn : Ganti tulisan berwarna merah dengan alamat Blog kamu

6. Simpan Gadget,dan lihat hasilnya

Baca Selengkapnya...