Yahoo Messenger Emoticons (Smileys) di Blogspot

Cara membuat/memasang Yahoo! messenger emoticons di kotak komentar Blogger, YM emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticons ini bukan? Yahoo emoticons ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google

Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger

Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit script yang berisi beberapa kumpulan Yahoo messenger emoticons yang umum dipakai dalam chat.

Langkah-langkahnya adalah :

• Login di Blogger > Template > Edit HTML
• Centang pada Expand Widget Templates
• Cari kode dibawah ini

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #2b2b2b; padding: 5px; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Kemudian cari kode </body>

Copy kode dibawah ini dan paste tepat diatas kode </body>

<script src="http://bloggerpeer.googlecode.com/files/smiley.js" type="text/javascript"/><noscript><a href="http://bloggerpeer.blogspot.com" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.

Colorpic | Software Untuk Mengetahui Kode Warna HTML

Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah software kode warna yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog.

Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari Yahoo Messenger emoticons.

Gambar diatas adalah contoh pengambilan kode warna kuning dari YM buddy, hanya dengan meletakkan kursor ke warna tersebut maka kodenya pun dapat diketahui, mudah kan? nah bagi sobat yang ingin download software colorpic ini silahkan langsung menuju ke situs Iconico dan bagusnya lagi software ini gratis tanpa bayar sepeser pun.

Cara Buat Bintang Jatuh dari Kursor Di Blog

Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

• Login di Blogger
• Pilih Design > Add gadget > HTML/Javascript
• Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat.

Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Template > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jBehkXokoIOXvRQTsIit6UUndlQZDPHmxgTDVS935E5Nr2JLZBVG12FcL1tPCVgQmANE0MT0ttBNabXLttygnC51nBbVq2HBL326_y2-bVn40VqI25UiaqyM6bW_hwmnpgxvgK7Y5go/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">
'+mainobj.controlHTML+'</div>
')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

• Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai.

Pada Tulisan yang berwarna Merah bisa Sobat Ganti dengan Gambar yang Sobat inginkan, Inilah beberapa Gambar yang saya saran kan untuk Sobat:

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnXGQczh_9YrqzOmlEIxm2U9yYWs7VSQtzyfB4jUX6SX8KSQlNO8r_sQ-_G_-6uGm3rpvf5H-p1HQL27HmEG11rlqDwEZNQKjEwe8tKuIZBVC4SDFdNpDwNtazDs30S5cOWzlp57_TQe0/s1600/back+to+top1.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PZSVPMbxrAHxRaFNHyKz9DpQ3FW1Y-tzzLv7MRkR5Ny_UBbFHKTfFNOojpDsWI57Jle9JtEWjTadd8Dsp88pS7iHTWHfeOELZ1SXSOj3HU4qPqIQzlr05ShEFuv93hsRP-LqbNH_-yU/s1600/back+to+top2.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTv74PKPxjd4gMU7ZWfk9EEwj6jZY0qF3lGYrbM8peM9oHjH8o_wq5-jkCvWXLboO9aNhW6TDNlEZCrUaTYS4sJjpusGYfQ-Q4ExP86f7h-RBfK-ATkLLFEbIlNaKw_1zn3Vt6-EsFUY/s1600/back+to+top3.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJc2VzSwJgTdsWt9dbESzTYodsHChFYY-lozPDGpkxsSh52_x5MhjmveEWpU_bUcD1NLJAOKgKmiZ8ZJROCDvbP9_awnzLf9f58fUSgrC7fyCbAM-_DHU8idv28E_ZyefGHqkLEm54XxI/s1600/back+to+top4.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5w1DW5T_xhjhB1mQttnrzhj459mDCNE_-hhcqxAzldjteFxQ4_MCYz5cvk5WBw3mPeUbBTkYpVEDRGIH3N5nGfn6cxW64wnozeJnzwqfZD8KrEoBFNtpR8uwu1kZYJe6dw0OXBvfBYw/s1600/back+to+top+animasi+1.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMFeT13jEWhtc1lcvj2oqE6LaZcUtPLoOqcB5M6lXcz7aE58zQQ7TyqfInzuxU2JsvtBadB2gvaBxMYNkXNow1t2L8NwcukAlVxbXsmMEkljbFv3vn5GGktjCvhbOAaq8BE8YBFLYAVc/s1600/back+to+top+animasi2.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3R2vwHuHyhChtOhiZXJHYR7tVjRtyb8riAA6reJNX4Qq5QsAN4X7FHgLOm0I5tTiuaQOf0ms3y-OnBS3BIIvM_63T4_5s0NJxvYPlqR43x2-HxDaDN_2WljXvTWehUJwzupYs_L5JGUE/s1600/back+to+top+animasi3.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUU8yLlRq7U2U8qLZVtHxqAYLLUGyy4-b_PwNFVgRO-gs8k0DDIdc5KzVXAlO3IoWIEY2lcd07PW9a8QYP__ntNWvJ2ZksLavXBDARaL8U8puww-ero8QOqp3bM9ns7io2umCW42WKxME/s1600/back+to+top+animasi4.gif



 Good Luck!!!

Cara Buat/Pasang Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

• Klik Layout > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ85pp3ei73b3e1R2THbR8wAu-wm8tmZk-q84jKhYcTf7vUSnyAsMUqiKI22lgj_DsMazenQbQwRTLWr-ahkLDFxSCOGP7uR5B5a_zXkZrEwiioBoO5w-OnMPfG8K8jRNHjfvREQhQGAM/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://www.blooger.co.id/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEm_uvdQXNesnRLmqsDV25EXHQv8N2qcm7zzbNU82xORyg3Co0g2HerEqwNVwLdK0MMd_fE4LbEYmOV8DtGhLlVfpM032eK72p0MuPx9Hz8bq98wYtCY8JHY_WGUiIr_NzLSmnlVOHTQ/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdbFTfi2zUyfD6s4-lSB4UdB2mqUBQjlMTrgjIVQBqj90Vh1enYHIQQPaXSWV8MRdR-iY7SCo6L9Om5P2Rqs1jb45_-vJe1Tusd14-qlCGotfbqODO_w4qgEZbLAa1HLmevPLCZkj7IQ/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgVXf5ivyDlGkdJzgGLILfuZLdmEsTwxTtC9HFLmbdvNM-uTx2a8Sru1Ipkqw-nOw1znnhhbBFHOMeHZwjET20c2F8BXgCf3nUIGHr_Qk2M7sYo-kteZNCLsD6guiBM-Tkep_PkZ-0IU/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9t1PI2joLDaavf-ncZ-CXkxU7pwop00CoAiRUVxlxx5pHRNjH56MY9caS8MMRJYMhVYh1U-M7t5sVVJwKyCVYWhibMmtdE6KxoAap5nrPrCEdUV2d2kFD4_pRrrzi5GbjwD69XabImbc/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6H9wReDlCUGObrgWGtbm93OeNUQyLl_rHDT-HXaUkPSY7tXba0gsl19j-ZzntTOjydX8Jlvhv6QpxsLe3ogC2xVMc1Jy2bDet8MqpolF3yclmuz9eSQXbijszjIurZZ5wxu71L2KqgQs/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDOQJMJoosM1LmN83UAz415wae8h6VXU74OCF3HA1l24RYLAbNm1q2AQuf6HUCAWIRQcUDjE5HEV79I2Hg84TE4F_He7WjetZL3E5GHRIdyz1UTW0yEji6auQBjIetLZKyBkAUzuS_hc/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeevUi016bcV9095jnBmAwdtCl8uBgyTBwsDz0Gqk24J5-TojJ400IwndAXbvHMzkFHNuggnrNRbJUndcknSu2OEE56u0GKeXBuo459w37hfCqxO-uz8XABNrxxfydyzXN4lztmzhwHHw/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusE9Lv7k8RyYAJSmW-R4PGWW3paxD_iaf-uLF4H57tnTlYwjy3Tc9I-06of9OxjGh70SBukfXLMrj4VSc4XUcfMeqbgmRmk-rs7vi3GiXaLq9yzXD65H7jnaFW80SLr1cdLNAUzRq5g0/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Cara Membuat Halaman Navigasi Bernomor di wordpress tanpa plugin

Kali ini saya akan posting Cara Membuat Halaman Navigasi Bernomor di wordpress tanpa plugin, sama halnya dengan sebelumnya kita hanya perlu memasang kode di file functions.php.

Berikut ini langkah-langkah yang harus dilakukan :
Login ke dashboard wordpress
pilih menu Appearance > Editor
Pilih file functions.php
kemudian tambahkan kode ini :

### Function: Page Navigation: Boxed Style Paging
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
if (is_single())
return;
$pagenavi_options = array();
$pagenavi_options['pages_text'] = __('Page %CURRENT_PAGE% of %TOTAL_PAGES%');
$pagenavi_options['current_text'] = '%PAGE_NUMBER%';
$pagenavi_options['page_text'] = '%PAGE_NUMBER%';
$pagenavi_options['first_text'] = __('« First');
$pagenavi_options['last_text'] = __('End');
$pagenavi_options['next_text'] = __('Next');
$pagenavi_options['prev_text'] = __('Back');
$pagenavi_options['dotright_text'] = __('...');
$pagenavi_options['dotleft_text'] = __('...');
$pagenavi_options['style'] = 1;
$pagenavi_options['num_pages'] = 5;
$pagenavi_options['always_show'] = 0;
$request = $wp_query->request;
$posts_per_page = intval(get_query_var('posts_per_page'));
$paged = intval(get_query_var('paged'));
$numposts = $wp_query->found_posts;
$max_page = intval($wp_query->max_num_pages);
if (empty($paged) || $paged == 0)
$paged = 1;
$pages_to_show = intval($pagenavi_options['num_pages']);
$larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
$larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
$pages_to_show_minus_1 = $pages_to_show - 1;
$half_page_start = floor($pages_to_show_minus_1/2);
$half_page_end = ceil($pages_to_show_minus_1/2);
$start_page = $paged - $half_page_start;
if ($start_page <= 0)
$start_page = 1;
$end_page = $paged + $half_page_end;
if (($end_page - $start_page) != $pages_to_show_minus_1) {
$end_page = $start_page + $pages_to_show_minus_1;
}
if ($end_page > $max_page) {
$start_page = $max_page - $pages_to_show_minus_1;
$end_page = $max_page;
}
if ($start_page <= 0)
$start_page = 1;
$larger_pages_array = array();
if ( $larger_page_multiple )
for ( $i = $larger_page_multiple; $i <= $max_page; $i += $larger_page_multiple )
$larger_pages_array[] = $i;
if ($max_page > 1 || intval($pagenavi_options['always_show'])) {
$pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
$pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
echo $before.'<div class="wp-pagenavi">'."\n";
switch(intval($pagenavi_options['style'])) {
// Normal
case 1:
if (!empty($pages_text)) {
echo '<span class="pages">'.$pages_text.'</span>';
}
if ($start_page >= 2 && $pages_to_show < $max_page) {
$first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
echo '<a href="'.clean_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">'.$first_page_text.'</a>';
if (!empty($pagenavi_options['dotleft_text'])) {
echo '<span class="extend">'.$pagenavi_options['dotleft_text'].'</span>';
}
}
$larger_page_start = 0;
foreach($larger_pages_array as $larger_page) {
if ($larger_page < $start_page && $larger_page_start < $larger_page_to_show) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($larger_page), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($larger_page)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
$larger_page_start++;
}
}
previous_posts_link($pagenavi_options['prev_text']);
for($i = $start_page; $i <= $end_page; $i++) {
if ($i == $paged) {
$current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
echo '<span class="current">'.$current_page_text.'</span>';
} else {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($i)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
}
}
next_posts_link($pagenavi_options['next_text'], $max_page);
$larger_page_end = 0;
foreach($larger_pages_array as $larger_page) {
if ($larger_page > $end_page && $larger_page_end < $larger_page_to_show) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($larger_page), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($larger_page)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
$larger_page_end++;
}
}
if ($end_page < $max_page) {
if (!empty($pagenavi_options['dotright_text'])) {
echo '<span class="extend">'.$pagenavi_options['dotright_text'].'</span>';
}
$last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
echo '<a href="'.clean_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$last_page_text.'</a>';
}
break;
// Dropdown
case 2;
echo '<form action="'.htmlspecialchars($_SERVER['PHP_SELF']).'" method="get">'."\n";
echo '<select size="1" onchange="document.location.href = this.options[this.selectedIndex].value;">'."\n";
for($i = 1; $i <= $max_page; $i++) {
$page_num = $i;
if ($page_num == 1) {
$page_num = 0;
}
if ($i == $paged) {
$current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
echo '<option value="'.clean_url(get_pagenum_link($page_num)).'" selected="selected" class="current">'.$current_page_text."</option>\n";
} else {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<option value="'.clean_url(get_pagenum_link($page_num)).'">'.$page_text."</option>\n";
}
}
echo "</select>\n";
echo "</form>\n";
break;
}
echo '</div>'.$after;
}
}

kemudian klik tombol Update File.
lalu pilih file index.php hapus kode ini :

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
</div>

kemudian ganti Dengan kode ini :

<div class ="wp-pagenavi"><?php wp_pagenavi(); ?></div>

Klik Update File.
nah sekarang kita atur css agar lebih rapi, caranya pilih file style.css kemudian masukan kode css ini :

.wp-pagenavi{
text-align:center;
margin-bottom:21px;
margin-top:15px; clear:both;
}

.wp-pagenavi a, .wp-pagenavi span{
text-decoration:none;
font-weight:normal; border:1px solid #ddd;
padding:3px 5px; margin:2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current{
background-color:#06F;
border-color:#FFF;
color:#FFF;
}

.wp-pagenavi span.current{
font-weight:normal;
background:#333;
}

Klik Update file dan lihat hasilnya. Selamat mencoba....

Cara membuat navigasi halaman nomor di blogspot

Akhirnya ada waktu senggang buat posting artikel lagi, kali ini Scholovers Blogger akan menyempatkan waktu untuk psting artikel tentang Cara membuat navigasi halaman nomor di blogspot kalo diarikel lainnya saya pernah posting tentang Cara Membuat Halaman Navigasi Bernomor di wordpress tanpa plugin, kali ini dengan tema yang sama namun dengan platform yang berbeda.

oke langsung saja ya, untuk memasang halaman navigasi ini kita hanya perlu memasang kode javascript di template kita dan menambahkan sedikit kode CSS untuk mempercantik tampilannya

Oke langsung saja kamu login di blogger kamu kemudian pilih template :

kemudian edit HTML, cari code </body> kemudian pastekan kode ini di atasnya :

<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--Page Navigation End -->

kemudian save template.
Nah sekarang kita akan menambahkan kode CSS Untuk mengatur navigasi halaman tersebut, Cari kode ]]></b:skin> kemudian letakkan kode CSS ini diatasnya :

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #FFA500;
background: #FFA500;
text-decoration: none;
}

silahkan save lagi templatenya dan lihat hasilnya...
Oke mungkin itu  saja artikel yang saya share kali ini semoga artikel tentang Cara membuat navigasi halaman nomor di blogspot bisa bermanfaat dan di terapkan di blog sobat.

Kartun Anime Yang Pernah Tayang Di TV Indonesia

Sekedar mau nostalgia masa zaman-zaman masih kecil dulu, pas anime atau kartun jepang booming di Indonesia ane buat listnya nih, kalian juga pernah pan suka sama anime yang dulu pernah di tayangkan di tv lokal dan ingin menontonnya sekali lagi tetapi sudah tidak ditayangkan di tv lokal, dan kalian lupa akan judul anime tersebut nah sekarang nda usah khawatir nih udah ada listnya judul anime :

1. Tv7 (sekarang Trans7).

• Scrapped Princess
• Ghost at School
• Yu yu Hakusho
• Whistle
• Final Fantasy Unlimited
• Trouble Chocolate
• Rave
• Hanada Shounen Shi
• Cowboy Bebop
• Azuki-Chan
• Hunter x Hunter
• Ultra Maniac
• Slam Dunk
• Full Metal Panic
• Tiny Snow Fairy Sugar
• Kaleido Star
• Detective Kindaichi
• Captain Tsubasa
• Nube
• Mach GoGoGo
• Shoot
• Louie The Rune Soldier
• Hikaru No Go
• Isami Shinsengumi
• Honey Bee Hutch
• Clamp Detective School

2. Trans Tv

• Love Hina
• Jin-Roh
• Evangelion
• Fruits Basket
• Blue Submarine No. 6
• star ocean EX
• Flame of Recca
• Cyborg Kurochan
• Ninku
• Trigun
• Jubei-Chan
  

3. Sctv

• Samurai X
• Popolocrois
• Sakura Wars
• Tokyo Mew-Mew
• Monster Rancher/Monster Farm
• Makibao
• Kiteretsu
• Robotan
• Ace O Nerae
• Metropolis
• Ninja Kabamaru
• Dog Of Flandre
• Dr Slump
• Dual Parallel Trouble
• Lets Asked Dr Rin
• Virtua Fighter
• Space Tekker
• Danguard Ace
• Grandizer
• Ojamajo Doremi
• Master Cooking Boy
• Street Fighter v2
• BT X
• Nono-chan
• Run-Dim
  

4. Antv

• Shaman King
• Kekkaishi
• Zoids
• Dragon Leageu
• Keroro Gunshou
• Offside
• Web Driver
• Magical Taluluto
  

5. Lativi (sekarang TvOne)

• Casshern
• Time Bokan
• Kiramekiman
• Minky Momo
• Creamy Mami
• Jeannie With the Light Brown Hair
• SDF macross

6. Rcti

• Cardcaptor Sakura
• .Hack//Sign
• Candy Candy
• Magic Knight Rayearth
• Doraemon
• Beyblade
• Cyborg009
• Ninja Hattori
• P-man
• Zenki
• Shinchan
• Si Botak Hagemaru
• Atashin-Chi
• Hamtaro
• Pretty Cure
• Kobo-Chan
• Chibi Maruko-Chan
• One Piece
• Astro Boy
• Saint Seiya
• Rose of Versailles
• Remi
• Lets & Go
• Yu-gi-oh
• Medabots
• UFO baby
• Chinpui
• Akazukin Cha Cha
  
• Kkyu-san
• Nadja

7. Tvri

• Tokyo Underground
• Golion
• Voltes V
• Kabuto
• Three Musketeers

8. Indosiar

• Gintama
• Kickers
• Bleach
• Hungry Heart
• Anpanman
• Ako-chan no Himitsu
• Mask of Zeguy
• Miracle Girls
• Kinnikuman
• Digimon Adventure
• Digimon Adventure 2
• Digimon Tamers
• Digimon Frontier
• Digimon Data Squad
• Cyber Formula
• Dragon Ball
• Cat Girl Nuku-Nuku
• Patlabor
• Crush Gear
• Hana Yori Dango
• Detective Conan
• Tokyo Babylon
• Shulato
• Inu Yasha
• Gundam W
• Gundam Seed
• Gundam Seed Destiny
• School detective Q
• Air Gear
• Sailormoon
• Pokemon
• Bakugan
• Fairy tail
• Galaxy express 999
• Ninja rantaro
• Corrector Yui
• B-da man
• 21 emon
• Metal fight beyblade
• Teko ajaib
• Blue Dragon
• K.O. beast juusenki (sepertinya ni anime dulu banget pernah tayang)
• Wedding peach
• Bakegyamon
• Duel Master
• Ragnarok the Animation
• Ronin WArrior
• Ge Ge no Kitaro
• Master ajiko
• Guru Guru
• Initial D
• Inazuma 11
• Monkey Turn
• Angelic Layer
• Dragon Quest
• SD gundam force
• Rockman
• Naruto Shippuden
• Battle Spirits
• Youkoso Yoko
• Metal Fight Beyblade
• Pretty Cure Max Heart
• Powerpuff Girl Z

9. Space Toon

• Absolute Boy
• Sugar Sugar Rune
• The Song of Tentomushi
• Muteking the Dashing Warrior
• Idol Densetsu Eriko
• Magical Emi
• Pastel Yumi
• Paul's Miraculous Adventure
• Marybell
• Sweet Mint
• Digi Charat Nyo!
• Panyo Panyo Digi Charat
• Lets Ask Pyoko
• Little Woman
• Daddy Long Legs
• Peter Pan
• Temple the Baloonist
• Cinderella
• Ashita no Joe
• Sneezing Magician
• Sugar Princess
• Dewi Karin
• Remi Nobody's Girl
• Monchichi
• Princess Knight
• Jankenman
• Daigunder

10. Tpi (sekarang MncTv)

• Saiyuki
• Ninja Boys

11. Global Tv

• Scrapped Princess
• Naruto
• Naruto Shippuden
• Eureka 7
• Dancouga Nova
• Gaiking
• Eyeshield 21
• DNAngel
• Samurai Deeper Kyo
• Inuyasha
• The Law Of Ueki

Note : kalau tidak ketemu di salah satu channel coba dilihat di channel lain.

Sayang sekarang anime di Indonesia sudah mulai menurun padahal seru jika di Indonesia lebih banyak anime lagi haha,
Maaf jika ada anime yang tidak tercantum atau ada kesalahan mohon maklum karena saya juga memiliki keterbatasan dalam browsing jadi share aja jika ada pendapat dari kalian semua.

Kumpulan Widget Blogger INDONESIA 2013

Kumpulan Widget Blogger Indonesia - Setelah Saya Keliling2 blog Tetangga Akhir nya Saya menemukan Widget Ini. Dan Sekarang saya ingin membagikannya Kepada Sobat semua. Langsung aja kita ke pembahasan.Apakah anda blogger indonesia?
bila anda blogger indonesia , pasang lah widget ini supaya orang luar indonesia bisa mengetahui blog anda adalah blogger indonesia sejati.

anda juga ingin membuat widget seperti link diatas juga ikuti cara - cara memasang widget seperti di atas. dan memasang widget seperti link blog diatas itu sangat mudah .


Cara - cara memasang Widger Blogger INDONESIA 2013 :
1. Login Ke blog > pada dasboard blog kamu pilih Design > Page Element > Add Gadget dan pilih JavaScript/HTML. Kemudian pastekan kode yang kamu pilih.
Silahkan pilih widget - widget dibawah ini:

Kumpulan Widget Blogger Indonesia

Style #1

Sudut Kiri atas

<script language="JavaScript" src="http://yourjavascript.com/2164411344/scholovers-blogger-kiri-atas.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://lh4.ggpht.com/_55xfixw5xxA/TSQeqQkaV7I/AAAAAAAAAO0/kFJ7ZrLVy3s/Widget%20Blogger%20Indonesia.png") </script>

Style #2

Sudut kanan atas

<script language="JavaScript" src="http://yourjavascript.com/5616444311/scholovers-blogger-kanan-atas.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://lh6.ggpht.com/_55xfixw5xxA/TSRAD5V-CeI/AAAAAAAAAPc/czrjhswKpVo/Widget%20Kanan%20Blogger%20Indonesia.png") </script>

Style #3

Sudut Kiri bawah

<script language="JavaScript" src="http://yourjavascript.com/3411454976/scholovers-blogger-kiri-bawah.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://2.bp.blogspot.com/-Y1dKjqpXvgA/Tb92aJRlKoI/AAAAAAAABYs/PLNETiLrfRQ/s1600/Blogger+Indonesia+Kiri.png") </script>

Style #4

Sudut kanan bawah

<script language="JavaScript" src="http://yourjavascript.com/6493144911/scholovers-blogger-kanan-bawah.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> cot("http://2.bp.blogspot.com/-Y1dKjqpXvgA/Tb92aJRlKoI/AAAAAAAABYs/PLNETiLrfRQ/s1600/Blogger+Indonesia+Kiri.png") </script>

• Silahkan untuk texs warna merah untuk di ganti dengan gambar pilihan anda dengan format ukuran  100 X 100 Pixel . dan ukuran bisa berapa saja sesuka mu.

Note: Pada sebagian template, tampilan widget Blogger Indonesia ini tidak bisa tampil tepat pada sudut yang diinginkan, sehingga akan terlihat janggal jika memasang widget ini.

Dan Scholovers Blogger juga punya gambar - gambar blogger indonesia lagii. silahkan di pilih :

http://lh5.ggpht.com/_55xfixw5xxA/TSVHdy9MFxI/AAAAAAAAAP0/nfFe3OYf3E0/Blogger%20Indonesia.png

http://lh5.ggpht.com/_55xfixw5xxA/TSVKbIlXynI/AAAAAAAAAP4/zO6JhyIbaDI/Blogger%20Indonesia2.png

http://lh4.ggpht.com/_55xfixw5xxA/TSVQ9DjCCRI/AAAAAAAAAP8/hYT_tTq5KV0/Widget%20garuda.png

http://img834.imageshack.us/img834/6526/blogger12.png

Ahh selesai juga deh Postingan Kumpulan Widget Blogger Indonesia 2013 semoga bermanfaat dengan artikel ini . selamat mencoba. AYOOO PASANG DI BLOG MU SEKARANG JUGA.

Demo judul postingan keren dengan efek CSS3 transisi

Silahkan arahkan mouse/krusor anda ke teks di bawah ini..!

                                                         KEMBALI KE TUTORIAL ....

INI ADALAH CONTOH JUDUL POSTINGAN MENGGUNAKAN EFEK CSS3 TRANSISI DAN EFEK LAINNYA 

Cara membuat judul postingan keren dengan efek CSS3 transisi di blog

Apakah Anda menggunakan judul dalam postingan blog Anda? Saya yakin Anda pasti melakukan hal itu. Seaindainya belum menggunakan judul, maka mulailah melakukan judul dalam postingan. Faktanya bahwa membuat judul dalam postingan membuat para pembaca (visitor) dapat membaca dengan mudah dan mesin pencari (search engine) juga menyukai hal itu (kata para master). Anda mesti membuatnya untuk membedakan antara jalur reguler dan heading (judul) terlihat cantik dan keren.  

Kali ini saya akan share ke anda tentang style judul postingan dengan menggunakan efek fading (memudar) hover yang sangat halus dengan bantuan CSS3 transisi serta efek-efek lainnya yang berbeda. Mari kita mulai langkah-langkahnya.. 
 

View Demo

 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
• kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.post h3 {
background: #C72C6A;
padding: 10px;
color: #fff;
font-size: 20px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.post h3:hover {
background: #AD0348;
color: #fff;
text-shadow: 4px 4px 10px #f4fff2;
filter: dropshadow(color=#f4fff2, offx=2, offy=2);
border: 4px double #FFCFE2;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
-webkit-box-shadow: 3px 3px 10px 1px #C72C6A;
box-shadow: 3px 3px 10px 1px #1F8399;
}

Setiap kali menulis postingan blog dan ingin menambahkan judul postingan, tulis diantara <h3>JUDUL POSTINGAN DISINI</h3>

KET:

• Untuk mengganti warna background,silahkan ganti kode warna yang di sorot warna kuning
• Untuk mengganti warna Font, silahkan ganti kode warna yang disorot wana hijau

Semoga bermanfa'at and Happy Blogging...