Tutorial Blog's: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Jumat, 21 April 2017

Cara Memasang TV di Blog

Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.

<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose

4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Menampilkan Rating Bintang di Hasil Pencarian Google

Cara Menampilkan Rating Bintang di Hasil Pencarian Google - Setelah sekian lama mencari artikel tentang cara menampilan rating star di hasil percarian google, akhirnya ane dapat juga tutorialnya. Caranya sangat mudah dan berbeda dengan tutorial lain yang pernah saya coba sebelumnya yang tentuhnya nggak berhasil, entah mungkin karna masalah template atau apalah ..ane nggak tahu..

Untuk bisa menampilkan rating bintang ini, sobat terlebih dahulu harus memiliki akun di google plus dan sudah harus terhubung dengan blog sobat dengan cara mengklaim sebagai kontributor untuk blog sobat tersebut. Masih bingung? Khusus yang belum punya akun di google plus, entar akan ane posting tutorialnya.

Sekedar tambahan, rating bintang ini nantinya akan dimunculkan di hasil pencarian untuk artikel - artikel blog sobat terutama artikel yang baru diposting sesaat setelah mengikuti dan memasang ratting bintang di tutorial kali ini..

Cara Menampilkan Rating Bintang di Google
1. Login ke akun blog sobat2. Klik Rancangan --> Edit HTML --> Centang kotak kecil di samping tulisan Expand Template widget
3. Letakkan kode berikut tepat diatas kode <b:skin><![CDATA[/*

<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/110332182798805450378' rel='publisher'/>
</b:if>

catatan:
ganti angka berwarna biru dengan Url google plus milik sobat.

4. Kemudian letakkan kode berikut sesudah kode <body>

dan tag penutup </div></div> sebelum tag penutup </body>

5. Cari kode <data:post.body/> dan letakkan kode berikut tepat dibawahnya.

Description: <span itemprop="description"><data:post.title/></span>
Rating: <span itemprop='rating'>4.5</span>
Reviewer: <span itemprop='reviewer'><data:post.author/></span> -
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>

Tambahan:
Kode <data:post.body/> akan berjumlah 2 jika sobat telah memasang readmore, pilih kode yang ke 2.

6. Klik save dan lihat hasilnya.

Posted on April 21, 2017 / 0 komentar / Read More

Widget Keren Untuk Blog Dari Google

Widget Keren Untuk Blog Dari Google - Selamat malam sobat blogger!!! Kali ini saya akan memposting artikel tentang Widget atau Gadget - Gadget keren yang bisa dipasang di blog dari sang raksasa search engine Google.. Google tak hanya memuaskan pelanggan dengan menghadirkan BLOGGER.COM namun juga turut andil untuk memuaskan para blogger mania dalam menghias blog. Terdapat Ribuan Widget yang Meliputi Game, Weather, Clock dan Masih banyak lagi...Sobat yang tertarik memasang widget - widget ini silahkan langsung saja menuju ke TKP..

Cara Memasang Widget Keren Dari Google di Blog
1. Silahkan Klik Disini
2. Sobat akan melihat tampilan seperti berikut.

3. Silahkan pilih widget yang di inginkan dengan meng-klik Add to your webpage.. Bisa juga langsung dimainkan secara online ( Khusus game ). Kemudian sobat akan melihat tampilan seperti berikut..

4. Atur tampilan Gadget/widget sesuai keinginan, kemudian klik preview Changes untuk melihat preview hasil settingan dan jika dirasa sudah sesuai klik Get the Code Untuk mendapatkan Script-nya

5. Silahkan Copy Paste ke halaman blog sobat. Adapun 2 cara memasang gadget ini di blog yaitu
A. Dengan meletakkan di halaman utama blog sobat ( Entah itu di sidebar, footer, ataupun header ).
Caranya :
1. Klik Tata Letak - Klik Tambah gadget - HTML/Javascript
2. Kemudian Masukkan kode Script-nya
3. Klik save

B. Dengan meletakkan di halaman postingan ( khusus game dan widget yang ber-resolusi besar alias makan tempat)
Caranya :
1. Buat entri baru dan beri judul sesuai keinginan
2. Kemudian Copy-paste kode scriptnya ke halaman posting HTML dan Bukan COMPOSE.
3. Klik Publikasikan.

Sekian...

Posted on April 21, 2017 / 0 komentar / Read More

Cara Membuat Teks Berjalan di Blog

Tulisan berjalan

Cara Membuat Teks Berjalan di Blog - Pernah tidak sobat melihat tulisan / teks yang mondar - mandir di suatu blog?? saya rasa pasti sudah pernah.. namanya marquee sob! fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news cuma yang ini lebih mudah ngaturnya, terutama dalam mengatur gerakan / prilaku teks yang di inginkan. Sobat yang tertarik membuat tulisan yang mondar - mandir ini, silahkan ikuti terus tutorialnya.

Cara Membuat Tulisan Berjalan di Blog

1. Tulisan bergerak dari kanan ke kiri

<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

hasilnya

Contoh Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan

<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri

<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

5. Teks bergerak dari atas ke bawah

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

6. Teks bergerak dari bawah ke atas

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

7. Teks bergerak mondar- mandir dari atas ke bawah

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

8. Teks bergerak zig - zag ( diagonal ) memantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

9. Teks bergerak zig - zag ( diagonal ) tembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.

tambahan :

Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan kode marquee antara kode berikut

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

hasilnya :

Contoh Tulisan Berjalan

Untuk menyisipkan link pada marquee, gunakan kode berikut :

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>
</div>

catatan :
ganti tulisan yang berwana biru dengan Url yang di inginkan.

hasilnya :

Cara Membuat Tulisan Berjalan di Blog

Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html/">cara membuat permalink di blog</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-logo.html">cara membuat logo</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/blog-di-blogspot-dan-blog-di-wordpress.html">blog di blogspot dan blog di wordpress</a><br/>
</marquee>

catatan :
kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer

Hasilnya :

cara membuat permalink di blog

cara membuat logo

blog di blogspot dan blog di wordpress

Sekian posting cara bikin tulisan berjalan nya....

Posted on April 21, 2017 / 0 komentar / Read More

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.

Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :

Login ke Blogger dengan akun anda.
Kemudian pilih Rancangan >> Edit HTML
Seperti biasa klik Download Template Lengkap biar aman
Jangan lupa centang Expand Template Widget
Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.
```
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>
```
Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas

Masukan kode Javascript berikut dibawah script jQuery tadi:

<script  type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Kemudian cari lagi kode berikut ini <body>
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

</div>
<a class="trigger" href="">ChatBox</a>
Dan yang terakhir Save Template anda.

Anda bisa ganti tulisan warna orange berkedip dengan kode shoutmix yang sudah anda buat sebelumnya.Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.

Posted on April 21, 2017 / 0 komentar / Read More

Membuat Effect JQuery Link Nudging di Blog

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog.kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :

Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
Tambahkan Script JQuery berikut diatas kode </head>
```
<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js"  ></script>
```
Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan

Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>        
$(document).ready(function()  {         
$(&#39;#Label1 li&#39;).hover(function() {  //mouse in         
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);         
}, function() { //mouse out          
$(this).animate({ marginLeft: 0 }, 400);         
});          
});         
</script><!-- end LinkNudging -->

Terakhir Save Template anda, dan lihat hasilnya

Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat

Posted on April 21, 2017 / 0 komentar / Read More

Membuat Kotak Pencari/Search di Blogspot

Sore hari yang mendung, mungkin sebentar lagi hujan. Daripada sebentar lagi listrik mati, mending saya tulis saja artikel ini walaupun mungkin temen-temen semua sudah tahu semua, Saya yakin temen-temen semua pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.
2. Klik Add a Gadget -> HTML/Java script

3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://blogmaslukis.blogspot.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari >artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.

Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut. Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.

Semoga bermanfaat

Posted on April 21, 2017 / 0 komentar / Read More

Menambahkan Elemen Baru di Bawah Header

Pertama-tama, sebelum kita mempelajari lebih jauh tentang menambahkan elemen baru di bawah header, kita harus tahu dulu apa sih header itu? Header adalah informasi awal atau data yang berguna untuk kategorisasi atau transmisi tujuan utama sebuah blog. Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Contohnya bisa sobat lihat pada gambar berikut ini ...

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Mau tahu caranya? silahkan ikuti langkah berikut :

Login ke blogger dengan ID anda.
Klik Rancangan.
Klik tab Edit HTML.
Klik Tulisan Download Template Lengkap untuk berjaga-jaga.
Copy kode berikut, lalu paste di atas kode ]]></b:skin>

%23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
Cari kode yang mirip dengan kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Copy kode berikut lalu paste persis di bawah kode tadi :

%23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda tersimpan.
Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
Sekarang sobat sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang inginkan.
Selesai.

Kode-kode di atas Saya encrypt. Walaupun sedikit membingungkan dan aneh di mata sobat tetapi tetap berhasil jika dicoba. Silahkan dicoba ..

Posted on April 21, 2017 / 0 komentar / Read More

Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog

Kadang sobat blogger pasti merasa jengkel karena ada gambar obeng di widget-widget blog sobat. Itu memang sering terjadi apalagi di template-template baru. Tampilannya bisa lihat di samping.

Seperti halnya Saya, pertama kali nge'blog juga merasa bingung dan jengkel karena Ada tanda seperti itu, ga enak dilihat di mata. Nah pada posting kali ini kita akan mempelajari cara menghilangkan tanda obeng tsb.

1. Login ke Account / Dashboard blog anda.

2. Masuk ke pilihan Design / Rancangan.

3. Pilih menu Edit HTML.

4. Cari kode ]]></b:skin>

5. Ganti kode tersebut dengan kode berikut ini :

.quickedit {display:none !important;}

]]></b:skin>

6. Save, dan lihat hasilnya.

Mudah kan? Mungkin beberapa sobat blogger bingung mengapa hanya pendek dan bertanya-tanya mengapa pendek sekali sedangkan di google caranya panjang. Itu hal biasa, karena di setiap blog pasti berbeda-beda templates yang ia gunakan.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Mengganti Style Font Blog

Sobat blogger pasti pernah mengganti / mengutak-atik font di post editor. Namun kali ini berbeda, kita akan mempelajari bagaimana caranya mengganti style font di blog. Kita bisa mengganti font yang ada di header, title, dll.

Mengganti font ada dua cara, yaitu :

Pertama, dengan metode kode CSS yang kita akan menggunakan font yang bisa kita pilih.

Kedua, dengan metode Cufon yaitu metode yang menggunakan jenis fontnya bisa kita upload dan kreasikan sendiri. Kita akan membahas metode ini pada artikel selanjutnya, jadi harap bersabar.

Berikut tutorial dengan menggunakan metode CSS.

1. Login akun blogger kamu.

2. Masuk ke Rancangan > Edit HTML.

3. Lalu cari kode CSS body {

Sobat blogger tinggal ganti jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height). Biasanya kita kesulitan untuk mengatur font-family, font-size, letter-spacing, word-spacing, line-height yang tepat buat blog kita . Oleh karena itu, Saya sudah menyiapkan beberapa alat bantu untuk font di bawah ini.

Nah gampang kan ? tinggal pilih, generate lalu copy code nya ke dalam body {

Misal :

body {
background:#E7E2DA
font-family: "Lucida Console", Monospace;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}

Nah begitulah hasilnya.

NB:
font-family: "Lucida Console", Monospace;

font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

Untuk Mengatur Font antar judul blog dan judul posting, sobat blogger bisa cari css h1{ untuk judul blog dan h3{ untuk judul posting .

Seperti di atas, sobat blogger tinggal masukin css kode fontnya,
Misal :

h3{
font-size:28px;
text-align:center;
font-family: Comic Sans MS;
}

Mudahkan? Silahkan Anda berkreasi sendiri.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Membuat Efek Tulisan Berjalan (Marquee)

Sebelum kita membahasnya alangkah baiknya kita mengetahui terlebih dahulu apa yang dimaksud dengan marquee..?Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahui cara membuat tulisan berjalan tersebut. tapi disini Trik Tips Tutorial akan mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

berikut cara pembuatannya :

Login ke Blogger
Kemudian klik Tata Letak dan Elemen Halaman
Ketika sudah berada di Elemen Halaman klik Tambah Gadget
Lalu pilih HTML/JavaScript
Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

1. Teks berjalan dari kanan ke kiri

kode :

hasil :

Contoh Tulisan Berjalan

2. Teks berjalan dari kiri ke kanan

kode :

hasil :
Contoh Tulisan Berjalan

3. Teks berjalan bolak balik

kode :

hasil :
Contoh Tulisan Berjalan

4. Teks berjalan dari atas ke bawah

kode :

hasil :
Contoh Tulisan Berjalan

5. Teks berjalan dari bawah ke atas

kode :

hasil :
Contoh Tulisan Berjalan

6. Teks berjalan mondar-mandir

kode :

hasil :
Contoh Tulisan Berjalan

7. Teks berjalan zig-zag nembus

kode :

hasil :

Contoh Tulisan Berjalan

8. Teks berjalan zig-zag mantul

kode :

hasil :

Contoh Tulisan Berjalan

Langkah Selanjutnya adalah mengganti tulisan

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang anda inginkan.

Ket :

# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :

~> Scroll --> teks bergerak berputar

~> Slide--> teks bergerak sekali lalu berhenti

~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

# Fungsi dari :

<center> ............. </center>

adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL.

Posted on April 21, 2017 / 0 komentar / Read More

Cara menambahkan Widget SMS Gratis Untuk Blogger

Widget sms gratis ini adalah sebuah widget yang bisa di gunakan untuk kirim-kirim SMS secara gratis kepada siapa pun. Cara penggunaannyapun sangat mudah, kita cukup masukkan no Hp tujuan dan isi sms yang akan kita kirim. Sebenarnya saat ini ada terdapat banyak situs penyedia sms gratis, namun di sini saya hanya ingin menuliskan 1 saja, yang lainnya bisa teman cari lewat Google :-)

Website yang saya maksud adalah www.sms-online.web.id

Cara Pasang Widget SMS Gratis Di Blogger :

1. Login Ke dashboard blogger

2. Klik Menu Rancangan / Design

3. Klik Tambah Gadget / Add Gadget (pilih HTML/JavaScript)

Kemudian Masukkan kode berikut di dalamnya

Nah itulah cara pasang widget sms gratis di blogger. Widget SMS Gratis Untuk Blogger ini tidak hanya bisa di pasang di widget (sidebar) saja lho. kita juga bisa memasangnya di post atau page.

Selamat mencoba dan semoga berhasil.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Membuat Text Box Di blog

Text box area biasanya digunakan untuk memasang kode-kode HTML yang dimaksudkan supaya bisa dicopy oleh pengunjung.

Untuk membuat text box area anda hanya membuat kode dibawah ini lalu silahkan pasang di gadget yang anda inginkan

Seperti biasa cara pasangnya Login Blogger–>Layout–>Add Gadget–>HTML/Javascript–>Lalu isikan kode2nya–>Save

Kode Untuk text box area tanpa tombol Highligh sebagai berikut:

<p align=”center”><textarea name=”code” rows=”3″ cols=”40″> Isi text anda atau kode2 HTML</textarea></p>

Silahkan ganti angka “rows” yang merupakan tinggi kolom dan “cols” yang merupakan lebar kolom sesuai keinginan anda

Hasilnya seperti ini :

Posted on April 21, 2017 / 0 komentar / Read More

Cara Memasang Screen Loading di Blog

Cara Memasang Screen Loading di Blogger - Salah satu Gaya yang sering di gemari para blogger untuk memper cantik tampilan blogger yaitu dengan Cara Memasang Screen Loading di Blogger. cara ini adalah salah satu cara untuk memper indah blog seperti Website.

Salah satu manfaat memasang Screen Loading di Blogger yaitu pengunjung blog tidak akan bisa melihat proses Loading tampilan blog, Jadi pengunjung langsung melihat Tampilan blog yang sudah utuh tampa harus melihat Loading tampilan blog anda.

Yang harus anda lakukan adalah :

1. Login Ke Akun Blogger sobat

2. Klik Rancangan > Edit HTML.

3. Cari kode ]]></b:skin> , Untuk mempermudah mencari silahkan gunakan CTRL+F.

4.Jika sudah ketemu letakan Kode HTML di bawah ini persis di atas kode ]]></b:skin>

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

5. Selanjutnya cari </head>, taruh kode di bawah ini persis di atas kode </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://idub.007sites.com/donor_ilmu/queryLoaderpre.js' type='text/javascript'/>

6. Berikutnya Cari </body>, taruh kode di bawah ini di atasnya kode </body>

<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

7. Save

Oke , Lihat Blog dan lihat perubahannya.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Mudah Membuat Page Navigation Seperti Google

Cara Mudah Membuat Page navigation Seperti Google - Kali ini saya akan share tutorial cara mudah membuat Page Navigation seperti yang ada di halaman google. Carnya juga cukup gampang dan simpel buat anda yang ingin mengganti Page Navigation Seperti Google.

Yang pertama yang harus di lakukan, Silahkan Login Ke Blogger anda, Lalu edit HTML . kemudian centang klik Expand Widget Templates (wajib). Setelah itu anda cari code berikut : ]]></b:skin> , untuk memudahkanya mencari code tersebut gunakan ctrl+f .

Dan bila sudah ketemu Copas Code HTML di bawah ini, Dan Paste di atas persis Code ]]></b:skin>

#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}

td.showpageOf{display:none;}

#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}

#nav a{display:block; text-decoration:none; color: #0066FF}

#nav a:hover{ text-decoration:underline;}

#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold}

.cur{ font-weight:bold;}

.csb{background:url(http://www.google.com/images/nav_logo7.png) no-repeat 0 0;height:26px;display:block;}

.csb.cur{background-position: -44px 0pt; width: 16px;}

.csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;}

.csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;}

.csb.ch{background-position: -60px 0pt; width: 16px;}

#nav td{padding:0;text-align:center}

Nah Bila Sudah Di paste, Sekarang Cari Code </body> , Dan bila sudah ketemu Copas Code HTML di bawah ini, Dan Paste di atas persis Code </body>

var home_page='/';

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

</script>;

Terakhir Tinggal Di Save dehh....

Semua Semoga Bermanfaat.

Posted on April 21, 2017 / 0 komentar / Read More

Cara Menambahkan Recent Posts + Comment Dengan Javascript

Cara Menambahkan Recent Posts + Comment Dengan Javascript - Biasanya kebanyakan dari sobat blogger membuat recent posts dan recent comment pasti menggunakan fasilitas dari gadget blogger. Cara itu memang mudah dan simple, tapi sobat tidak akan bisa membuat lebih dari 5 dengan menggunakan fasilitas blogger, makanya dengan javascript ini dimudahkan untuk membuat recent posts + recent comment ini.

Selain itu, kamu juga bisa menambahkan recent posts / recent comment ini pada tabview widget kamu. Dibanding cara pertama (menggunakan Gadget Blogger), cara kedua ini memiliki kelebihan dimana jumlah judul posting atau komentar dapat diatur sekehendak kita (bisa lebih dari 5). Untuk menggunakannya kamu bisa mengikuti langkah-langkah berikut:

Login ke akun blogger kamu
Masuk ke tab rancangan, elemen laman
Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:
Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

Kode untuk Recent Posts:

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

</script>

Keterangan variabel:
- numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting)

- showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
- showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
- numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
- standardstyling = true; artinya menggunakan type standard.

Jika ternyata tidak muncul bullets pada setiap judul Recent Posts kamu (karena setiap template selalu berbeda), maka tambahkan perintah <ul> pada script terakhir dan ditutup dengan </ul> (lihat contoh pada script Recent Comments yang kedua).

Kode untuk Recent Comments:

var numcomments = 10;

var showcommentdate = true;

var showposttitle = true;

var numchars = 100;

var standardstyling = true;

</script>

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.

Jika Recent Comments kamu ingin menggunakan bullets, seperti pada Recent Comments pada blog ini, gunakan script berikut:

var numcomments = 10;

var showcommentdate = true;

var showposttitle = true;

var numchars = 100;

var standardstyling = true;

</script>

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu. Sekian dulu postingan saya mengenai membuat recent posts + recent comment, semoga bagi kamu yang ingin membuat recent comment bisa terbantu dengan postingan ini.

Nah, selesai dah. Selamat mencoba.....

Posted on April 21, 2017 / 0 komentar / Read More

Cara Membuat Label Cloud Putar - Cloud Blogumus

Label adalah pengelompokkan artikel blog dalam satu kategori, dan

kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template Anda, jadi mengedit template, ada baiknya backup terlebih dahulu template Anda.

I. Langkah Pertama

Login ke Blogger dengan ID Anda
Klik Tata Letak
Klik tab Edit HTML
Download dahulu template sobat dengan mengklik Download Template Lengkap
Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Copy kode berikut ini setelah kode diatas :
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Kemudian Simpan Template.

II. Langkah Kedua

Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
Merubah warna font
so.addVariable("tcolor", "0x333333");
Merubah ukuran font
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Jika dalam membuat label cloud ini tidak berfungsi, silahkan Anda ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

Semoga bermanfaat :

Posted on April 21, 2017 / 0 komentar / Read More

Jumat, 21 April 2017

Cara Memasang TV di Blog

Cara Menampilkan Rating Bintang di Hasil Pencarian Google

Widget Keren Untuk Blog Dari Google

Cara Membuat Teks Berjalan di Blog

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Membuat Effect JQuery Link Nudging di Blog

Membuat Kotak Pencari/Search di Blogspot

Menambahkan Elemen Baru di Bawah Header

Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog

Cara Mengganti Style Font Blog

Cara Membuat Efek Tulisan Berjalan (Marquee)

berikut cara pembuatannya :

Cara menambahkan Widget SMS Gratis Untuk Blogger

Cara Membuat Text Box Di blog

Cara Memasang Screen Loading di Blog

Salah satu manfaat memasang Screen Loading di Blogger yaitu pengunjung blog tidak akan bisa melihat proses Loading tampilan blog, Jadi pengunjung langsung melihat Tampilan blog yang sudah utuh tampa harus melihat Loading tampilan blog anda.

Cara Mudah Membuat Page Navigation Seperti Google

Cara Menambahkan Recent Posts + Comment Dengan Javascript

Cara Membuat Label Cloud Putar - Cloud Blogumus

Daftar Nama Member

Baca Juga