Cara Background Postingan Blog/Website dapat di Zoom In dan Zoom Out

    Apa kabar semuanya,,, hari ini Admin dan Staff akan memberikan cara Backround postingan pada website dapat di "Zoom In dan Zoom Out" nah apakah kalian ingin seperti blogger/website kami??? yang backround postingan bisa di Zoom In dan Zoom Out, Seperti gambar dibawah ini :

    Cara membuat postingan agar gambarnya dapat di "zoom in dan zoom out" sangat begitu mudah, Zoom in dan Zoom out sangat berguna bagi website anda, karena gambar dapat dilihat begitu jelas dan tidak samar-samar tidak seperti blogger/website bawaan yang bila di klik gambar tersebut akan menuju ke file lain dan tentu tidak bisa kelihatan jelas gambarnya, apalagi bila kalian mengisikan tutorial dan begitu sangat bosan bagi para pengunjung mondar-mandir ke blogger/website tersebut. Nah sekarang coba ikuti langkah-langkahnya berikut ini.

Cara Pemasangan Zom In dan Zoom Out Postingan.

---

1. Masuk ke Blogger > Pilih menu Template > Klik tombol Edit HTML. Bila tidak tahu caranya mengedit template bisa kunjungi disini.

Kalau sudah tau carannya lanjut deh, kalian copy dan paste kan scriptnya di Edit HTML supaya bisa mencari filenya dengan cepat bisa klik CTRL+F kemudian taruhlah scriptnya "di atas" ]]></b:skin>  atau "di atas" </style> dan scriptnya dibawah ini :

/* --- Zoom In dan Out Postingan --- */ 
#navbar-iframe,{display:none!important;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{font:normal normal .8125em/1.4 Arial,Sans-Serif;background-color:white;color:$(main.text.color);}
strong,b{font-weight:bold;}
cite,em,i{font-style:italic;}
*{position:relative;word-wrap:break-word;}
a{color:$(keycolor);text-decoration:none;}
a:visited{color:$(link.visited.color);text-decoration:none;}
a:hover{color:$(link.hover.color);text-decoration:none;}
a img{border:none;}
abbr,acronym{border-bottom:1px dotted;cursor:help;}
sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;}
sub{top:.4em;}
small{font-size:86%;}
kbd {display:inline-block;border:1px solid #ccc;border-radius:4px;padding:0.1em 0.5em;margin:0 0.2em;box-shadow:0 1px 0px rgba(0,0,0,0.2), 0 0 0 2px #fff inset;background-color:#f7f7f7;}
mark{background-color:#ffce00;color:black;}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0;}
hr{height:1px;border:none;background-color:$(side.text.color);}
h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:normal;margin:1.5em 0 0;}
h1,h2,h3,h4,h5,h6,.post-summary strong,.menu-xitem,.postinfo strong,.rcentpost strong a,#nav .sf-menu > li > a,.navtab,#related_posts .jdlunya strong,.PopularPosts .item-title,.ticknews,#related_posts strong a{font:$(main.heading.font);text-transform:none;}
h1{font-size:200%;}
h2{font-size:180%;}
h3{font-size:160%;}
h4{font-size:140%;}
h5{font-size:120%;}
h6{font-size:100%;}
ol,ul,dl{margin-$startSide:3em;}
ol{list-style:decimal outside;}
ul{list-style:disc outside;}
li{margin:.5em 0;}
dt{font-weight:bold;}
dd{margin:0 0 .5em 2em;}
input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline;}
textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;}
pre{white-space:pre;word-wrap:normal;overflow:auto;}
blockquote{margin-$startSide:2em;margin-$endSide:2em;border-$startSide:4px solid #ccc;padding-$startSide:1em;font-style:italic;}
.hidden,.post-feeds{display:none;}
.invisible{visibility:hidden;}
.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(0px 0 0 0);height:1px;width:1px;margin:-1px 0 0;padding:0;border:0;}
.clear{display:block;clear:both;height:0;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.pull-left{float:left;}
.pull-right{float:right;}
.centered{clear:both;display:block;text-align:center;margin-left:auto;margin-right:auto;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-justify{text-align:justify;}
.btn{color:$(post.background.color);background-color:$(contdatehov.background.color);}
.btn:hover{background-color:$(keycolor);}
.btn:active{top:1px;}
.row{overflow:hidden;}
.col1{width:100%;}
.col2{width:50%;}
.col3{width:33.3%;}
.col4{width:25%;}
body{background:$(body.background);margin:0;padding:0;color:$(main.text.color);font:x-small Georgia Serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}
img{max-width:100%;height:auto;width:auto\9;}
::selection{background:$(keycolor);color:$(post.background.color);text-shadow:none;}
::-moz-selection{background:$(keycolor);color:$(post.background.color);text-shadow:none;} 
/* --- Zoom In dan Out Postingan --- */ 

Kalau sudah di save kemudian coba kalian postingkan gambar yang kalian inginkan, Contoh Gambar yang ingin saya upload :

kalau sudah di publikasikan, cobalah kalian liat blogger/website kalian dan kunjungi gambar yang dituju, kemudian klik gambar tersebut dan lihat hasilnya seperti gambar dibawah berikut :

Sudah selesai deh, jika ingin membagikan tolong sertakan link ya,, Terima Kasih,,,...

Kami akan memberikan yang terbaik untuk anda...