Trik Blogspot

Cara Mempercantik Tampilan Feedburner Di Blog

Cara Mempercanti Tampilan Feedburner - pada postingan kali ini saya akan membuat tutorial tentang mempercantik tampilan form berlangganan. Sebelumnya feedbuner sendiri menyediakan form berlangganan dengan tampilan yang simple, nah kali ini saya akan memberikan script dengan tampilan form berlangganan yang lebih keren dan menarik.

Sekarang bagaimana cara memasangnya ?

Pertama, Log-in ke blogger kalian,
Kedua, pilih Rancangan,
Ketiga, pilih Tata Letak,
Keempat, pilih Tambah Gadget,
Kelima, pilih Javascript/Html,
Selanjutnya, sobat copy script di bawah ini ke dalamnya,

<style>
.form {
border:1px solid #ccc;
background: #ffffff
padding:3px;
width:300px;
height:150px
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6e_isZ0_DVh_xqM-23fFvqu20apQzZ9MddjOkBHjlfwElM46wRqeO6_vuAIGklh08Qq2dQh7Dw9F-KDa526o7PuamdVxDjBbdE1yrSbOynQVpMK7XkuK_MUKdsYVmmLcsQDY_SzZ_NLwz/s400/feedreader_2.jpg")repeat-y right;
}

.button {
background: #006699;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin-left: 5px;
border: 1px solid #234B69;
padding:3px 5px 3px 5px;
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:0x 5px 5px 10px;"><div style="padding-left:10px"><p><a href="http://feeds.feedburner.com/_deejayHan_" rel="alternate" type="application/rss+xml"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmE8GhxfOXN8sMUQKZfvV9EMptRVwiVo3DGmngkz5j9dYyzVNfCpTzQIwUkQZanRH4CrNxdnegB3R6w8UGmV6UkHvoep2GGj1mLtx588kx-I-QcArPBd9AsNDgLa3wQG26wnZ6_tsKZDZ/s200/feed-c.png" alt="" style="vertical-align:middle;border:0"/></a><a href="http://feeds.feedburner.com/_deejayHan_" rel="alternate" type="application/rss+xml"> Gratis berlangganan artikel via RSS</a></p></div></div>

<div style="padding-left:10px"> Anda bisa berlangganan FEED via email</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=_deejayHan_', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:170px; height:16px" name="email" onblur="if (this.value == "") {this.value = "Tulis email anda disini";}" onfocus="if (this.value == "Tulis email anda disini") {this.value = ""}" type="text" value="Tulis email anda disini" /> <input type="hidden" value="DeeJayHan" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Subscribe" /></div></form>

<div style="padding-left:10px"><a target="_blank" href="http://feeds.feedburner.com/Koisine"><img
border="0" alt="ads" src="http://feeds.feedburner.com/~fc/_deejayHan_?bg=8a8a8a&fg=444444&anim=1"/></a></div>
</div></div>

Note : Ganti _deejayHan_ dengan nama Feedburner kalian.
Terakhir, Simpan.

Ganti sekarang juga dengan tampilan feedburner yang lebih keran.
Description: Cara Mempercantik Tampilan Feedburner Di Blog
Rating: 4.5 4.5

Cara Membuat Tooltip Otomatis di Blog

Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat kursor mouse mengarahkan pada suatu link. dan pada posting kali ini, saya akan membagikan langkah - langkah membuat Tooltip Otomatis di blog.

Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)

Kedua, Masuk ke Rancangan - Edit HTML

Ketiga, Centang Expand Template Widget.

Keempat, Paste Kode Berikut di bawah kode <body>.

<script src='http://hanjs.googlecode.com/files/wb-tooltipdeejayhan.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Muhammad Hanafi (DeeJayHan) </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://hanjs.googlecode.com/files/wb_tooltips.js'/>
<script src='http://hanjs.googlecode.com/files/wb_autotooltips.js'/><div id='warungbebasautotooltip'>

Kelima, Paste Lagi kode berikut di atas kode </body>

</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.

Description: Cara Membuat Tooltip Otomatis di Blog
Rating: 4.5 4.5

Memasang Permalink Tag Di Blogger

DeeJayHan-Blog -Permalink adalah singkatan dari permanen link yang mana maksud dari permalink ini adalah URL suatu halaman pada web atau blog. Jika sobat ingin melihat permalink ya gampang saja, tinggal lihat address bar pada browser maka itulah yang dinamakan permalink.

Nah,berikut Memasang Permalink Tag di Bawah Posting :

1. Masuk ke akun Blogger.

2. Klik → .

3. Klik untuk membuat salinan template. Hal ini untuk memudahkan mengembalikan template ke kondisi terakhir sebelum diedit jika nanti terjadi kesalahan.
4. Beri tanda centang pada "Expand Template Widget".
5. Cari kode
6. Letakkan kode css di bawah ini di atas kode tadi.

.permalinktag{margin-top:5px;border:1px solid #eff0f1;color:#424242;padding:5px;background:#fbfbef}.permalinktag a{background:0}img.float-right{margin:5px 0 0 10px}img.float-left{margin:5px 10px 0 0}#mn2{width:100%;height:28px;background:#1e90ff;border-top:1px solid #666;border-bottom:1px solid #666;margin-top:0;margin-left:0}

7. Selanjutnya carilah kode
8. Setelah ketemu, letakkan kode berikut di bawah kode tersebut.

<div class='deejayhan_permalink' style='border:2px dashed red;background:#FFF9B4;padding:10px 5px 5px 10px;text-align:justify'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:post.title/></u></strong> dan anda bisa menemukan artikel <data:post.title/> ini dengan url <strong><data:blog.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:post.title/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</small></center></div>

9. SIMPAN TEMPLATEDescription: Memasang Permalink Tag Di BloggerBlogger
Rating: 5.0

Membuat Super Navigation Dengan CSS3

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.

View Demo

Bagaimana ? Bagus tidak ?

Mau buat seperti itu ?

Cara Membuat Super Animated CSS3 Navigation Menu
Langkah 1

Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.

.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
        width:599px;
        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}

5. Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS di atas
6. KLIK SAVE Template (Simpan Template).
Langkah 2

<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://deejayhan.blogspot.com">Tutorial Blogger<br /><br /><span>Tutorial Blogger</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://google.com">Google<br /><br /><span>Google</span></a></li>
<li><a class="anima" href="http://facebook.com">Facebook<br /><br /><span>Facebook</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>

Simpan xHTMl melalui penambahan widget. Sampeyan ikuti seperti langkah di atas (login), hanya setelah masuk di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript". Copy x-HTML dan pastekan di box penambahan widget.
KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.

Keterangan :

Yang teks berwarna Merah adalah link / url anda
Yang teks berwarna Kuning adalah teks sesuai anda inginkan

Semoga Bermanfaat :)

Description: Membuat Super Navigation Dengan CSS3

Rating: 4.5 4.5

Membuat Scroll Pada Kotak Komentar Di Blog

Membuat scroll kotak komentar pada blog berguna untuk memperpendek kotak komentar, sangat diperlukan, dalam rangka menghemat ruang template anda agar tidak terlalu panjang kebawah, dimana banyak kasus yang terjadi halaman web kita akan menjadi sangat panjang jika komentar pada suatu postingan kita sudah sangat banyak. Hal ini tentu saja mengganggu jika kita atau pembaca blog ingin mengetahui widget ata hal - hal penting dalam blog kita yang terletak di footer blog kita, karena kita/pembaca harus melakukan scroll halaman blog begitu panjang ke bawah. Jika anda ingin menghemat/ memperpendek halaman blog anda karena adanya list komentar dari rekan blogger yang sudah terlalu banyak, inilah solusinya yaitu dengan cara membuat scroll kotak komentar menggunakan CSS.

Hasil akhirnya adalah kotak komentar anda akan tampil sesuai keinginan anda dalam menentukan ketinggian kotak kolom komentar sesuai dengan kebutuhan. Kotak komentar dengan scroll ini juga bermanfaat jika ada yang ingin submit komentar ke dalam postingan anda tidak terlalu repot untuk melakukan scroll terlalu panjang kebawah karena tombol "post a comment" tepat berada di bawah kotak/kolom komentar yang anda buat nanti.

Tidak usah berpanjang lebar lagi, dibawah ini adalah langkah-langkah bagaimana cara menambahkan/membuat scroll pada kotak komentar :
1. Login ke dashboard blogger anda.
2. Pilih Design/rancangan, kemudian pilih Edit HTML, lanjutkan dengan memberi tanda centang pada 'Expand widget template'.
3. Kemudian silahkan carilah kode CSS #comments-block{
4. Tambahkan kode CSS dibawah ini stelah kode CSS di atas.

max-height:300px;border:1px solid #eee;overflow:auto;

5. Berikut ilustrasi kode CSS pada kotak komentar blog ini SEBELUM dan SESUDAH dilakukan perubahan.

Kode CSS kotak komentar SEBELUM dirubah :

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

Kode CSS kotak komentar SESUDAH dirubah menjadi seperti ini :

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

6. Sedangkan ukuran tinggi kotak komentar 300px, jenis border 1px solid serta warna border #eee tentunya dapat dirubah sesuai selera anda.
7. Jika sudah selesai, lakukan saving template anda.
8. Buka blog anda, kemudian klik salah satu artikel postingan anda, silahkan cek kolom komentar anda...walllaaa..kotak komentar anda sudah rapi jali terkurung dalam kotak komentar sesuai ketinggian yang anda inginkan. Halaman posting menjadi rapi, simple dan enak dipandang, karena tidak terlalu panjang.

Silahkan mencoba semoga bermanfaat pls try without error :)
Description: Cara membuat Scroll Kotak Komentar
Rating: 4.0 4.0

Membuat Recent Post Efek Slide Plus Thumbnails V2 With Jquery

Recent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya.Dan sebelumnya saya juga udah share tentang Recent Post Thumbail . Dan kali ini saya share Recent Post Thumbail V2 . Adanya animated recent post widget, dapat menambahkan lagi 'seri' bagi senarai recent post anda.

View Demo

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUT2we8-ogkRoeztu4xOApesJgwJypVC_J-5F_F4luzVnegzh8Mo97Dp03uupP6rTpF9nkZIb6vvghGSzyfb9YHcpH-FQ8DstvYTvQ-ek6k5sHdwWPC5R2E-grs3I-5_AJhH-6sAhf7yYq/s1600/view-blogger-tutorial-demo.png

Tutorial untuk membuat animated recent post ini adalah seperti berikut.

1. Dari Dashboard > Design > Add a Gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hanjs.googlecode.com/files/recentpostv2.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://deejayhan.blogspot.com/2012/04/membuat-recent-post-efek-slide-plus.html" target="_blank">get this widget here</a></small>

Sekian terimakasih .

Semoga Bermanfaat

Description: Membuat Recent Post Efek Slide Plus Thumbnails V2 With Jquery

Rating: 4.5 4.5

Membuat Lebih Style Fan Page Di Blogger

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Tutorial kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.

Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

1. Login Ke Akun Blogger Anda
2. Lalu Pilih Rancangan ===> Tambah Gadget ===> HTML / Java Script
3. Lalu Copy & Paste Kode di bawah ini :

4. Setelah Anda Copy & Paste Lalu Simpan.
5. Dan Lihat hasil nya

Yang Berwarna Biru di ganti dengan Fan Page Anda

Yang Berwarna Orange di ganti dengan ID fan page anda

Note :
Untuk yang sudah mengubah ID fan page dengan teks anda bisa di lihat dari Foto Fan page anda
di klik Kanan Pada gambar dan Lihat Gambar Pada foto Fanpage
Screen Shot :

Nah ID fan page saya adalah : 201758876517562
Terakhir di save saja . dan jadilah :D
Cukup di mengerti ?
Kalau tidak mengerti tanya jawab saja di komentar bawah .
Terimakasih .
Description: Membuat Style Fan page Di Blog
Rating: 5.0 5.0

Membuat Email Subscription dengan Icon Bergambar Di Blogger

Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript3. Masukan kode dibawah ini:

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdi96cODAR49-f6dyufNH2k6Mv4shQ4HQ-T0vt1kI5OpzMERSE-J99BpwtqDCCi9k4Z7MYi3oe_LRTKI7G79rTxyVJ5tl1v9afZ5tN1lFzF7Mcd6ExywU1eQl4Ro2s1lwOHbQDr3n51ynJ/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYukI4gDBPRs1b8QvSd8opm0zVZkYfSKs6ut0TYobMd-g2pyEqQliPaLHcDbZMV0o99Png_GXFe-DlMxJyWAMcjbmwJ4xm16AZATLN9ngVdbKWY8LhyphenhyphenMZEHBZuEiVzcJasjFLTwDj5Z7lu/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYS79xJVpK5jmuUBMWLdsFzByV4UTW1EeNYfUbQgKirIfuhyl29VXdjfH3DTTZMpKm8E39VuLAaaQQAItg8y3IiaDPdYZssqwOFUe8xHlc3QoFXpgbuUhjhwIFCN3NxRqRB22LraIAkzUq/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_flhPODDZGaa6d-w1zM3J4nOi6koVkHE1d1gJOUs6ixZf3t3vflRBrblDeR9e-Tt9W2_WcOIvcVBoxhc_qT-pHN8Ratqxu93xgmgijEk9q-eP7LXeR4kGjvDrSIyGmAPtIAYYbSsYvJ4/s1600/google-48.png" /></a></td>
</tr></table>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/blogtrikdantips"><img src="http://feeds.feedburner.com/~fc/blogtrikdantips?bg=FF6600&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.blogtrikdantips.blogspot.com">Blogger Widgets</a>
</div>

4. Gantilah kode berikut ini:

http://www.facebook.com/DeeJayHan-Blog dengan fanpage facebook anda.
http://twitter.com/DeeJayHan1dengan halaman twitter Anda.
http://feeds.feedburner.com/_deejayHan_dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
blogtrikdantips (dari bagian bawah kode di atas) dengan id feedburner Anda.

5. Klik simpan.

Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!

Description: Membuat Email Subscription dengan Icon Bergambar Di Blogger
Rating: 4.5 4.5

Tips Mudah Mendapatkan Backlink Berkualitas

Tips Mudah Mendapatkan Backlink Berkualitas - Cara Mendapatkan Backlink Berkualitas - Dulu sebelum mengerti bagaimana cara membangun sebuah blog yang baik, saya tidak pernah sama sekali yang namanya berkomentar di blog orang, saya hanya cuma cek tiap hari apakah blog saya sudah ramai atau belum. Setelah sekian lama saya selalu gagal dan masih saja sepi penggunjung saya pun mencoba berselancar di internet dan mencari tips mudah mendapatkan backlink berkualitas yang bisa membantu blog saya agar cepat ramai penggunjung padahal blog bisa ramai pengunjung bukan karena backlink saja namun juga beberapa tips lainnya.

Namanya juga orang baru pasti masih minim sekali penggalaman dan juga wawasan jadi terpaksa harus belajar dulu bertahap untuk bisa menjadi mahir di dunia nge blog ini. Kita kembali ke topik pembicaraan kali ini yaitu Tips Mudah Mendapatkan Backlink Berkualitas ini bisa anda lakukan dengan sangat mudah, hal ini yang selalu saya lakukan dulu saat membangun blog kutulis ini, Namun perlu saya jelaskan terlebih dahulu kepada teman teman bahwa tips ini bukan bersifat mutlak yah teman, terserah teman nantinya mau di tambah beberapa tips lainnya juga boleh kok disini saya hanya berbagi tentang apa yang saya alami selama ini.
Cara mendapatkan backlink berkualitas bisa kita lakukan dengan beberapa cara berikut dibawah ini.

SOCIAL BOOKMARKING
Banyak sekali situs social bookmarking bertebaran di intenet saat ini. Yang selalu saya lakukan adalah setiap mempublish artikel baru saya selalu menyempatkan mensubmit artikel saya ke beberapa situs social bookmarking indonesia namun jika teman mau menambahkan ke beberapa situs social bookmarking luar juga boleh kok. Disini saya biasanya mensubmit posting saya ke beberapa situs lokal di antaranta adalah kombes.com infogue.com populerkan serta lintas.me yang dulu bernama lintasberita.com.
Manfaat kita mensubmit posting kita ke situs social bookmarking adalah mempercepat indeks serta backlink satu arah yang anda dapatkan juga situs social bookmarking sangat dipercaya oleh mesin pencari google karena tingkat arus lalu lintas pengunjung juga submit posting tiap harinya. Jadi perbanyaklah posting dan submit posting ke berbagai situs social bookmarking.

RAJIN BERKOMENTAR DI BLOG
Salah satu hal yang paling mudah untuk mendapatkan backlink berkualitas adalah dengan berkomentar di blog namun di sini yang di utamakan sebisa mungkin berkomentar di blog dofollow walaupun blog nog=follow juga dihitung backlinknya namun alangkah baiknya jika kamu sering sering berkomentar di blog populer yang memiliki tingkat lalu lintas pengunjung yang tinggi bisa membantu blog anda menjadi lebih bagus untuk mendapatkan posisi serp blog.

BUAT BLOG DUUMY
Jika kamu mempunyai waktu yang cukup luang kamu bisa membuat blog alternatif yang tujuannya untuk memperkuat backlink serta sumber lalu lintas backlink tambahan dari blog dummy tersebut ke blog utama kamu sehingga bisa mendapatkan backlink yang berkualitas dari blog dummy tersebut. blog dummy di arahkan ke blog utama kamu sehingga secara tak langsung juga akan memperkuat blog utama kamu untuk bersaing di mesin pencari internet.

Saya rasa cukup sekian Tips Mudah Mendapatkan Backlink Berkualitas dari saya ini dan semoga apa yang saya tulis dari penggalaman pribadi saya in bisa memberikan informasi tambahan buat teman teman blog kutulis yang mungkin sedang membangun sebuah blog baru dan masih belum jelas bagaimana cara mengoptimasikan blog baru tersebut. Sekian dan terima kasih. Keep blogging yah.

Cara Cek Blogmu Apakah Sudah Terindeks Google

Cara Cek Blogmu Apakah Sudah Terindeks Google - Kebanyakan blogger yang sedang membangun sebuah blog pasti sering sekali mengalami hal serupa seperti saya dulu yaitu bagaimana cara cek blog apakah sudah terindeks google? Apakah blogku sudah di index google dan lainnya. Nah kali ini saya mau berbagi informasi bagus buat kamu yang ingin sekali mengetahui bagaimana agar bisa mengecek blog kita apakah sudah di index apa belum yaitu Cara Cek Blogmu Apakah Sudah Terindeks Google.

Caranya cukup mudah sekali untuk mengetahui apakah blog kita sudah atau belum terindeks oleh google dan setelah kita malakukannya kita akan melihat seberapa banyak blog kita di indeks oleh google, jika blog kamu belum di indeks oleh google jangan khawatir teman baca aja cara Tips Cara Agar Halaman Blog Cepat Di Index Goolge | Terideks Di Google dan jika blog kamu masih sepi jangan khawatir tak kasih info bagus buat kamu baca aja Tips Mudah Mendatangkan Ribuan Visitor | Tutorial Mudah Blogger . Jika kamu ingin mengetahui hasil keseluruhan dari blog kamu caranya cukup mudah anda tinggal menuliskan keseluruhan nama dan URL blog anda. Seperti contoh di bawah ini.

Ketikkan site:namadomainanda.blogspot.com. Misal untuk blog ini menjadi, site:kutulis.com. Jika situs Anda terindeks dengan baik, maka akan ada banyak hasil cari yang berisi judul-judul artikel Anda.
Jika, ingin menampilkan semua hasil indeks Google untuk blog Anda, klik lah Tampilkan Semua Hasil Dari www.kutulis.com

Semoga tips dari saya ini bisa memberikan jawaban sederhana tentang Cara Cek Blogmu Apakah Sudah Terindeks Google dan semoga bermanfaat dan terima kasih keep blogging.

Tips Cara Membuat Kotak Admin Author Di Bawah Posting Blog

Tips Cara Membuat Kotak Admin Author Di Bawah Posting Blog - Salah satu widget yang cocok buat teman teman blog kutulis yang ingin lebih dekat dengan para pengunjung blog dengan menempatkan widget kotak admin di bawah posting dengan maksud agar lebih di kenal oleh penggunjung atau hanya sekedar ingin memberikan sepatah dua kata kepada para pembacanya tips ini mungkin bisa menjadi pilihan bagus buat kamu. Tips Cara Membuat Kotak Admin Author Di Bawah Posting Blog juga bisa memberikan kesan menarik serta kebih variatif dengan adanya widget widget pemanis di dalam blog anda.

Jika kamu tertarik silahkan mengikuti langkah langkahnya di bawah ini.

Masuk Ke Blogger anda
Rancangan >> Edit Html >> Centang "Expand Widget Template"
Copy paste kode berikut sebelum kode ]]></b:skin>

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> dan letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='http://i1192.photobucket.com/albums/aa330/hayeksaja/gambarlucu-1.jpg' width='70'/><b>About Author</b><br/>
Contoh Author box<br/></p>
</div>
</b:if>

Ganti link warna merah dengan link foto anda dan silahkan di save sekarang sudah tersedia kotak admin di bawah posting blog anda.
Semoga artikel dari saya yang berjudul Tips Cara Membuat Kotak Admin Author Di Bawah Posting Blog ini bisa bermanfaat untuk teman teman yang sedang melakukan optimasi blog dan terima kasih keep blogging.

Cara Membuat Lightbox Slideshow di blogger

Jika selama ini kita selalu terpancang untuk menggunakan jQuery untuk membangun desain blog dengan segala pernak-perniknya, kini cakrawala coba kita kembangkan dengan mencoba beberapa desain menarik image preview (lightbox) dari prototype.js dan scriptaculous.js. Setelah pada posting sebelumnya kita buat sebuah lightbox cantik, kini satu lagi lightbox yang sudah dilengkapi dengan slideshow bisa menjadi pilihan alternatif bagi anda. Prototype-1.6.0.2.js dan scripttaculous.1.8.1.js mampu memberikan suguhan menarik dalam sebuah bentuk lightbox slideshow.

D E M O

Silahkan klik pada salah satu thumbnail di demo dan tunggu beberapa saat. Ketika image dengan ukuran yang jauh lebih besar terlihat, maka secara otomatis slideshow akan bekerja dan demi satu image (berukuran besar) ditampilkan di halaman blog sesuai dengan banyaknya thumnail. Untuk menghentikan slideshow silahkan klik "Stop Slideshow" dan klik "Start Slideshow" untuk mengaktifkan kembali slideshow. Jika ingin mengoperasikan secara manual klik "Stop Slideshow", kemudian gunakan fungsi "Nex" dan "Previous".

Cara Membuat Lightbox Slideshow

Simpan link kode css dan javascript di atas kode </head> / di bawah code <head> .

Kode CSS dan Javascript

<link rel="stylesheet" href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/GR_lightbox-slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://hanjs.googlecode.com/files/deejayhan_lightbox-slideshow.js"></script>

2.. Jika lightbox tak dapat berfungsi dengan sempurna, download kode css dan simpan di atas kode ]]></b:skin>, dengan bentuk sebagai contoh di bawah.

#lightbox{position:absolute;top:20px;left:0;width:100%;z-index:100;text-align:center;line-height:0;color:#151410;}
#lightbox a, #lightbox a:hover{border-bottom:none;color:#151410;text-decoration:underline;}
#lightbox a img{border:none;}
#outerImageContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;}
#imageContainer{padding:10px;}
#loading{position:absolute;top:32%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#loadingLink{display:block;margin:0 auto;padding:0;width:75px;height:75px;background:url("http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif") center center no-repeat;text-indent:-9999px;}
#hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#imageContainer>#hoverNav{left:0;}
#hoverNav a{outline:none;}
#prevLinkImg, #nextLinkImg{width:49%;height:100%;background:transparent url("http://lightbox-slideshow.googlecode.com/files/blank.gif") no-repeat; /* Trick IE into showing hover */display:block;text-indent:-9999px;}
#prevLinkImg{left:0; float:left;}
#nextLinkImg{right:0; float:right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/prevlabel.gif") left 15% no-repeat;}
#nextLinkImg:hover, #nextLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/nextlabel.gif") right 15% no-repeat;}
#imageDataContainer{font:10px Verdana, Helvetica, sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;}
#imageData{padding:0 10px;}
#imageDetails{width:70%; float:left; text-align:left;}
#caption{font-weight:bold;}
#numberDisplay{display:block; clear:left;}
#detailsNav{display:block; clear:left; padding:0 0 10px 0;}
#prevLinkDetails{margin:0 8px 0 0;}
#nextLinkDetails{margin:0 8px 0 0;}
#closeLink{display:block;margin:0;padding:0 0 10px 0;text-decoration:none;float:right;width:66px;height:28px;background:url("http://lightbox-slideshow.googlecode.com/files/closelabel.gif") no-repeat;text-indent:-9999px;overflow:hidden;}
#overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;background-color:#151410;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix{display:inline-block; width:100%;}
* html .clearfix{height:1%;}

3. Cara Pembuatan gambarnya copy script / kode di bawah ini ke dalam Posting , Enti Baru , Klik Edit HTML di Entri Edit . Berikut Kode nya :

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;">
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
</div>

Keterangan :

Yang teks berwarna Kuning adalah gambar thumbailnya untuk di perbesar gambarnya
Teks yang berwarna Biru Adalah Title / Teks yang ada di gambar . Sesuai Keinginan anda
Teks yang berwarna Merah adalah gambarnya yang di perlihatkan di posting

Sekian Terimakasih .
Semoga Bermanfaat bagi semuanya
Description: Cara Membuat Lightbox Slideshow di blogger
Rating: 4.5 4.5

Facebook akan Rilis Tombol Benci "Hate"

Blogadexme | Facebook akan Rilis Tombol Benci "Hate", baru-baru ini aku membaca sebuah pernyataan yang ada di Om Kaskus kalau katanya Facebook akan Rilis sebuah Tombol Benci atau lawan dari Like "Suka". Tombol Hate ini seiring akan berdampingan dengan tombol Like yang akan menemani Status kamu.

Screenshoot gambarnya akan terlihat seperti di samping ini. Belum tahu apa alasan yang pasti kenapa Tombol Hate ini akan dirilis oleh Situs Jejaring Sosial terbesar Facebook ini. Menurut Aku pribadi mungkin ini akan mengatasi User yang selalu Update status setiap 1 menit sekali, Serta mengatasi Status-status yang sering isinya menjelek-jelekkan seseorang atau yang berbau Pornografi.

Coba kamu bayangkan kalau Tombol Benci "Hate" ini akan di buat, apakah masih ada Status kamu yang di Like "Suka" oleh Teman kamu malah akan berbalik meng Tombol Benci "Hate". Belum lagi status Admin Blogadexme ini, karena seiring Hobi Blogging dan membagikan Artikel-artikel ini ke teman-teman Facebook maka akan berbalik Meng Klik tombol Hate, ahhh Kalau gini apa enggak kacau!. Apalagi saat ini lagi heboh-hebohnya kata "Kamseupay", lihat artikel sebelumnya Apa itu Kamseupay, Arti yang sebenarnya!.

Facebook saat ini dapat menghasilkan 2,7 Milyar Like "Suka" dan Komentar Perharinya. Maka dari situ dari kehadiran Tombol Benci "Hate" akan dapat menaikkan Klik User Facebook setidaknya 2 kali Lipat.

Jika kita menelaah lagi ke Halaman dari FC Barcellona atau Manchester United yang dapat menghasilkan 20 Juta Like "Suka" per Tautan dari masing-masing Halaman tersebut, maka Facebook mempertimbangkan Jumlah pengguna Facebook yang mungkin tidak Suka atau Benci dari setiap Status Halaman tersebut.

Namun beberapa Sumber yang telah saya baca Bahwa Tombol Benci "Hate" ini masih belum pasti kapan akan di lengketkan pada Situs Jejaring Facebook. Karena pemunculan Tombol Benci "Hate" masih dalam proses perdebatan oleh Berbagai kalangan di perusahaan Jejaring Sosial.

Sekian dulu Info dari Saya tentang Facebook akan Rilis Tombol Benci "Hate" semoga Artikel ini dapat bermanfaat untuk sahabat-sahabat sekalian, jangan lupa meninggalkan segores Komentarnya dan Membaca artikel-artikel lainnya. Thanks!

Apa itu Kamseupay, Arti yang sebenarnya!

Blogadexme | Apa itu Kamseupay, Arti yang sebenarnya!, Akhir-akhir ini Kata "Kamseupay" cukup Populer di kalangan para anak-anak Gaul. Namun tidak terlalu banyak yang mengetahui Apa Arti yang Sebenarnya tentang Kata yang terbilang Populer ini. Setelah sebelumnya telah lahir kata "Galau" yang terkenal di Jejaring Facebook dan Twitter.

Banyak orang yang menduga bahwa kata "Kamseupay" ini berasal dari Marissa Haque pada Tulisannya di Blog Pribadinya, beginilah cuplikan singkat di Blog Pribdinya ;

"Sekarang saya malah kasihan pada Pak Dekan FEMA IPB yang baru mencoba muncul jadi pencipta lagu ya Pak? Kok mau-maunya punya penyanyi agak "Kamseupay" atau Kampungan atau Norak Sekali seperti Dee Djoemadi".

Ternyata itu salah, bahwa Marissa Haque bukanlah Pencipta dari kata "Kamseupay" ini, tapi Marissa Haque lah yang mempopulerkan kata Unik ini. Karena kata "Kamseupay" ini sudah lahir sejak Tahun 1970-an.

Namun, Apa itu Kamseupay yang sebenarnya!? Kata orang Kamseupay adalah Singkatan dari "Kampung Sekali, Kampung Sekali Uhh Payah atau Udik dan Payah" itulah prediksi orang tentang kata ini. Namun arti kata Kamseupay yang sebenarnya adalah "Kampungan atau Ndeso".

Akhir-akhir ini Kata Kamseupay jadi Tren dan Populer di dalam Situs Jejaring Twitter dan akan Menyebar ke Situs Jejaring Facebook setelah dari Blog Pribadi Marissa Haque pada tahun 2000-an, Kata "Kamseupay" juga ternyata pernah tren di tahun 1980-an. Kata ini Sekarang bisa Sejajar dengan kata "Galau" yang juga Populer saat ini.

Kata "Kamseupay" juga telah digunakan oleh salah satu Operator seluler sehingga kata ini semakin meluas dan di kenal oleh banyak orang dan bagi para pengguna Akun Twitter dan Facebook.

Sesudah mengerti dengan kata "Kamseupay", arti dari Kampungan telah dapat di ganti menjadi sebuah kata yang baru saat ini. Walaupun bagi beberapa orang kata ini mungkin masih di bilang Kasar. Penggunaan yang hati-hati bisa jadi salah satu Faktor yang wajib di taati.

Dan jangan Sempat pula menggunakan kata ini pada sebuah Status Facebook untuk mengejek seseorang karena saat Facebook akan Rilis Tombol Benci "Hate" dan Status kamu itu akan di penuhi dengan Klik Hate "Benci".

Semoga Artikel dari Blogadexme tentang Apa itu Kamseupay, Arti yang sebenarnya! dapat menjadi bahan pengetahuan untuk sahabat-sahabat sekalian. Sekian dulu dari Saya, jangan lupa meninggalkan segores Komentarnya. Thanks!

Membuat News Sticker dengan Jquery

DeeJayHan-Blog News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide. Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut. Kita akan menggunakan script jquery untuk membuatnya news sticker ini. Ingin tau caranya ikuti tutorial berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode kode ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>

/* News Sticker by www.deejayhan.blogspot.com
---------------------------------------------*/
.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

5. Selanjutnya letakkan kode berikut ini di atas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

6. Kemudian kita akan meletakkan news sticker tersebut diatas posting dan sidebar seperti posisi news sticker milik saya, caranya yaitu cari kode <div id='outer-wrapper'>

7. Setelah itu paste kode berikut diatas kode <div id='outer-wrapper'>

<div style='clear:both;'/>

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://deejayhan.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

8. Ganti kode berwarna merah dengan url blog anda
9. Simpan template anda dan lihat hasilnya

Demikian cara membuat news sticker di blogger. Semoga dengan tampilan news sticker halaman anda semakin senang dibaca oleh pengunjung. Selamat mencobanya....!

Description: Membuat News Sticker dengan Jquery

Rating: 5.0 5.0

Cara Membuat Artikel Terkait Dengan Gambar

Cara Membuat Artikel Terkait Dengan Gambar - Setelah beberapa hari ini saya selalu update mengenai software serta aplikasi dan tadi membuka arsip coment ada pengunjung yang menanyakan tentang bagaimana Cara Membuat Artikel Terkait Dengan Gambar di blog mereka, soalnya saya belum pernah memposting artikel ini sebelumnya saya pernah memposting Cara membuat related post dibawah posting blogger nah di situ ada teman yang menanyakan hal tersebut jadi kali ini saya akan membagi informasi yang mungkin juga berguna bagi teman teman blog kutulis lainnya juga yah. Cara Membuat Artikel Terkait Dengan Gambar Thumbail ini cukuplah mudah dan simple namun jika anda belum menguasai mengenai kode script dan juga cara pemasangannya mungkin akan mengalami sedikit kendala, namun jangan khawatir teman jika kamu belum paham silahkan anda belajar karena dengan belajar semuannya akan terasa mudah.

Oke daripada saya kebanyakan omong silahkan di ikuti langkah langkahnya ya teman, silahkan di ikuti langkah di bawah ini.

1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>

</b:if>

Kalau sudah, cari kode berikut

Dan letakkan kode di bawah ini di BAWAH kode di atas

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href=' http://caratrikterbaru.blogspot.com/2012/04/cara-membuat-artikel-terkait-dengan.html ' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Artikel Terkait";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Simpan dan lihat hasilnya.

Gimana nih teman Cara Membuat Artikel Terkait Dengan Gambar ini mudah bukan? jika sudah berhasil selamat ya sekarang blog anda semakin bagus dan juga lebih menarik sehingga pengunjung blog semakin betah di blog anda dan juga dengan memasang related post di blog bisa meningkatkan pageviews blog kita lho. Saya rasa cukup sekian tips dari blog kutulis ini dan semoga apa yang saya tulis kali ini bermanfaat bagi teman teman semuannya yah. Makasih dan keep blogging.

Pages