Iklan 125x125

Join This Site
Back

Labels

Tips Trick Blogger (8)

info

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

Pengikut

PENGUNJUNG KE-

Kamikaze

Diberdayakan oleh Blogger.
The Pinki Boy - Halo Sobat. Kali ini saya akan berbagi trik tentang search engine. Sebut saja nama Trik ini adalah "Cara Membuat Kotak Search Keren di Blog".Wah, Search engine itu saya dapatkan dari template Dark Light Faster Responsive Template by MDF beserta menu navigasinya :D . Triknya cukup Mudah. Hanya Dengan Menaruh CSS dan HTML ke Dalam Template kita. Gimana yah triknya ?? Simak bacaan dibawah ini.


Cara Membuat Kotak Search Keren di Blog

- Login ke Blogger
- Masuk ke Menu edit Template >> Edit HTML
- Lalu Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi
/* css quick search */
#search-form-feed { padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:150px; float:right; margin-top:7px; position:relative; margin-right:7px }
#feed-q-input { display: block;
width: 116%;
height: 28px;
border: 1px solid #2B2B2B;
color: #0A0909;
margin: 0;
font-size: 12px;
padding-left: 10px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
float: left;
background-color: white;
margin-left: -38px;
font-family: offside;}
#feed-q-input:focus { color:#333; outline:none; -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95; -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95; box-shadow:0 0 5px #153E95,0 0 7px #153E95 }
#search-result-container { width:300px; overflow:auto; position:absolute; z-index:9999; padding:10px; right:0; margin:0; top:42px; display:none; font-size:11px; background-color:white; text-transform:none; -moz-box-shadow:inset 0 0 7px #d6d6d6; -webkit-box-shadow:inset 0 0 7px #d6d6d6; box-shadow:inset 0 0 7px #d6d6d6; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; border:1px solid #ccc }
#search-result-container li { margin:0 0 5px; padding:0; list-style:none; word-wrap:break-word; font-size:10px; color:#141414; background-color:white; text-transform:none }
#search-result-container li a { text-decoration:none; font-weight:bold; font-size:11px; display:block; line-height:14px; padding:0; font-weight:bold }
#search-result-container mark { background-color:yellow; color:black }
#search-result-container h4 { margin:0 0 10px; font:normal bold 12px; color:black }
#search-result-container ol { margin:0 0 10px; padding:0 0; overflow:auto; height:300px }
#search-result-container:hover ol { overflow:auto }
#search-result-container li img { display:block; float:left; margin:0 5px 1px 0; padding:2px; border:1px solid #D1D1D1 }
#search-result-loader { top:100%; position:absolute; z-index:999; width:100%; line-height:30px; color:#2E2E2E; padding:0 10px; background-color:white; border:1px solid #DBDBDB; margin:0; overflow:hidden; display:none; text-transform:capitalize }
#search-result-container p { margin:5px 0 }
#search-result-container .close { position:absolute; right:8px; top:8px; font-size:12px; color:white; text-decoration:none; border-radius:9999px; width:13px; height:13px; text-indent:1px; background-color:#1295C9; line-height:12px }
#search-form-feed button { background-repeat:repeat-x; background-position:left -3px; background-color:#01B8C0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; border-top-left-radius:0; border-bottom-left-radius:0; text-indent:-9999px; width:50px; overflow:hidden; margin:0; padding:7px 10px 6px; height:26px; font-size:12px; font-family:Arial,Helvetica,sans-serif; position:relative; cursor:pointer; transition:all linear .3s; -moz-transition:all linear .3s; -webkit-transition:all linear .3s; -o-transition:all linear .3s; box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 white,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 white,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); -moz-box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 #FFF,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); border:none !important; outline:none }
#search-form-feed button::before { content:' ' ; position:absolute; width:20px; height:20px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3n0L39DbTccVLdFS0HFdSxZz3lA5sYow3wRmhxSwJQ4QEp3YtL2_7GoAEbKcpmLUSjosqox427zd87yzyDlBZpnXv89rcOwEA-ZHFFA5jaSll_OlkoQer_Rd_xUNunbeyr3wm6U6Fdc/s22/button-search.png); display:block; overflow:hidden; top:4px; left:15px }
#search-form-feed button:hover { background-color:#535353 }
 #search-form-feed:after {
content: "\f002";
font-family: fontawesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: blue;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 5px;
right: 0;
}
- Lalu Cari kode Menu navigasi kamu atau tempat yang kamu inginkan dan letakan kode HTML dibawah ini tepat diatas kode menu navigasi kamu
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value=&apos;&apos;;' onkeyup='resetField();' type='text' value='Cari artikel...'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    numPost: 9999, // Jumlah maksimal temuan
    summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
    summaryLength: 100, // Jumlah karakter ringkasan posting
    resultTitle: "Result for", // Judul hasil pencarian
    noResult: "No result", // Deskripsi 'tak ditemukan'
    resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
    thumbSize: 45, // Ukuran & resolusi thumbnail
    fallbackThumb: "http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png" // Fallback thumbnail untuk posting tak bergambar
};
var _0xf1a5=["m $$$(a){I x.1T(a)}5 1=2f,6=$$$(\x22v-q-6\x22),7=$$$(\x22u-W-1o\x22),y=$$$(\x22u-W-1X\x22),8=\x22\x22;m 1b(l){5 k=l.v.14?l.v.14:\x22\x22,a,g,e;8=\x22\x3C1d\x3E\x22+1.29+\x22 \x261l;\x22+6.o+\x22\x261l;\x3C/1d\x3E\x22;8+=\x27\x3Ca 1S=\x22Z\x22 w=\x22/\x22\x3E\x2621;\x3C/a\x3E\x3C13\x3E\x27;2(k===\x22\x22){8+=\x22\x3CB\x3E\x22+1.1y+\x22\x3C/B\x3E\x22}17(5 d=0;d\x3C1.1k;d++){2(d==k.N){1n}5 b=1t 1D(6.o,\x221N\x22),f=k[d],h=f.1V.$t.F(b,\x22\x3CA\x3E\x22+6.o+\x22\x3C/A\x3E\x22);17(5 c=0;c\x3Cf.M.N;c++){2(f.M[c].J==\x221B\x22){a=f.M[c].w;1n}}2(1.1C===1j){2(\x221u\x22E f){g=f.1u.$t}G{2(\x22O\x22E f){g=f.O.$t}G{g=\x22\x22}}}2(1.1W===1j){2(\x221p$1q\x22E f){e=f.1p$1q.25.F(/\x5C/s[0-9]+\x5C-c/g,\x22/s\x22+1.H+\x22-c\x22)}G{e=1.2o}}g=g.F(/\x3C\x5CS[^\x3E]*\x3E/g,\x22\x22);2(g.N\x3E1.Y){g=g.1w(0,1.Y)+\x22...\x22}g=g.F(b,\x22\x3CA\x3E\x22+6.o+\x22\x3C/A\x3E\x22);8+=\x27\x3CB\x3E\x3C1x 3=\x221z:\x27+1.H+\x2210;2u:\x22+1.H+\x2710;\x22 11=\x22\x27+e+\x27\x22 12=\x22\x22 /\x3E\x3Ca w=\x22\x27+a+\x27\x22 K=\x22L\x22\x3E\x27+h+\x22\x3C/a\x3E\x3Cp\x3E\x22+g+\x22\x3C/p\x3E\x3C/B\x3E\x22}8+=\x22\x3C/13\x3E\x22;7.15=8;y.3.4=\x22r\x22;7.3.4=\x2218\x22}m 19(){5 a=x.1a(\x22n\x22);a.1c=\x22X/1e\x22;a.1f=\x22u-v-n\x22;x.1g(\x221h\x22)[0].1i(a)}19();m 1A(){7.3.4=\x22r\x22;y.3.4=\x2218\x22;5 a=$$$(\x22u-v-n\x22),b=x.1a(\x22n\x22);b.1f=\x22u-v-n\x22;b.1c=\x22X/1e\x22;b.11=\x22P://\x22+Q.R.1E+\x22/1F/1G/O?12=1H-E-n\x26q=\x22+6.o+\x22\x261I-1J=\x22+1.1k+\x22\x261K=1b\x22;a.1L.1M(a);x.1g(\x221h\x22)[0].1i(b);I 1m}m 1O(){7.15=\x22\x22;2(6.o===\x22\x22){7.3.4=\x22r\x22;y.3.4=\x22r\x22}$(\x22#u-W-1o\x22).1P(\x221Q\x22,\x22.Z\x22,m(){7.3.4=\x22r\x22;y.3.4=\x22r\x22;I 1m})}(m(){5 f=1R,e=f(\x22%23%z%T%z%1U%U%U%V%D%1Y\x22),g=f(\x22%1Z%z%20\x22),i=Q.R.22+\x22//\x22+Q.R.24,j=$(e+\x22 .26\x22).27(\x22a\x22).X(),b=$(e+\x22 \x22+g+\x22 \x22+g+\x22 \x22+g),c=f(\x22%V%28%D%1r%D%T\x22),a=f(\x22%2a%2b%U%1r\x22),k=f(\x22%T%z%V%D\x22),h=1t 2c().2d();b.2e(\x22\x22);b.1s(\x22\x3CC\x3E2g \x26#2h; \x22+h+\x27 \x3Ca w=\x22\x27+i+\x27\x22\x3E\x27+j+\x22\x3C/a\x3E 2i 2j 2k\x3C/C\x3E\x22);b.1s(\x27\x3CC\x3E2l 2m 2n \x3Ca J=\x2216\x22 K=\x22L\x22 w=\x22P://2p.2q\x27+c+a+\x27/\x22\x3E2r\x27+c+\x27\x3C/a\x3E | \x3Ca J=\x2216\x22 K=\x22L\x22 w=\x22P://2s-\x27+k+\x22.2t\x22+a+\x27/\x22\x3E1v \x27+k+\x22\x3C/a\x3E\x3CC\x3E\x22)})();","|","split","|config|if|style|display|var|input|resultContainer|skeleton||||||||||||||function|script|value|||none|||search|feed|href|document|resultLoader|69|mark|li|div|65|in|replace|else|thumbSize|return|rel|target|_blank|link|length|summary|http|window|location||73|6F|74|result|text|summaryLength|close|px|src|alt|ol|entry|innerHTML|nofollow|for|block|appendScript|createElement|showResult|type|h4|javascript|id|getElementsByTagName|head|appendChild|true|numPost|quot|false|break|container|media|thumbnail|6D|append|new|content|MKR|substring|img|noResult|width|updateScript|alternate|summaryPost|RegExp|hostname|feeds|posts|json|max|results|callback|parentNode|removeChild|ig|resetField|on|click|unescape|class|getElementById|66|title|resultThumbnail|loader|72|64|76|times|protocol||host|url|cpright|find|68|resultTitle|2E|63|Date|getFullYear|html|searchFormConfig|Copyright|169|All|Right|Reserved|Blogger|Designed|by|fallbackThumb|www|ivy|IVY|mkr|blogspot|height","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (p,a,c,k,e,r){e=function (c){return (c<a?_0xf1a5[4]:e(parseInt(c/a)))+((c=c%a)>35?String[_0xf1a5[5]](c+29):c.toString(36));} ;if(!_0xf1a5[4][_0xf1a5[6]](/^/,String)){while(c--){r[e(c)]=k[c]||e(c);} ;k=[function (e){return r[e];} ];e=function (){return _0xf1a5[7];} ;c=1;} ;while(c--){if(k[c]){p=p[_0xf1a5[6]]( new RegExp(_0xf1a5[8]+e(c)+_0xf1a5[8],_0xf1a5[9]),k[c]);} ;} ;return p;} (_0xf1a5[0],62,155,_0xf1a5[3][_0xf1a5[2]](_0xf1a5[1]),0,{}));
//]]>
</script>
- Simpan Template

Cara Membuat Kotak Search Keren di Blog

Posted by Unknown
Tag :

Cara Membuat Link Otomatis Saat Artikel di Copy Paste, udah tahu apa belom nih sobat ... Kalo belom tahu sobat bisa Copy artikel di blog  terus pastekan di notepad, dll ..

Pnki Boy Akan Share Yang Diatas
Biasanya akan muncul seperti ini ...

Cara Membuat Link Otomatis Saat Artikel di Copy Paste

Nah itu contohnya ... OK langsung ke caranya aja yah sob ...

1. Masuk ke akun BLOGGER sobat masing"
2. Klik menu Template ==> Edit HTML
3. Copy dan Pastekan kode di bawah ini tepat di atas kode <body atau <body>

<script type='text/javascript'> if(document.location.protocol==&#39;http:&#39;){ var Tynt=Tynt||[];Tynt.push(&#39;cXIEhKYVSr4lJ5adbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Sumber Artikel : &quot;}; (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://infonetmu.googlecode.com/files/sumber-otomatis.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})(); } </script>

Ket * : Warna Hijau bisa diganti dengan kata" sobat yang diinginkan.
4. Setelah itu, Klik SIMPAN, dan selesai ...

Nah Gampang bangetkan sob caranya, biasanya buanyak banget yg tanya tentang ini, Sekian dan Semoga Bermanfaat ..

Cara Membuat Link Otomatis Saat Artikel di Copy Paste

Posted by Unknown
Tag :
Cara Membuat Subscribe Email Keren Di Blog
Halo sobat mummyz ... sebelum nya saya sudah memberikan Trik yaitu cara membuat Sidebar Accordion nah kali ini saya mau ngasih trik gmna cara memberikan kotak subscribe email dan artikel terkai di bawah postingan blog.

Oke langsung ke tutorial nya ajah yah ..

1.Login Ke Blogger
2.Klik Template
3.Edit HTML
4.Cari kode ]]></b:skin>
5.Lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin>


#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNC7AlG-_1yIprpwSLe_40zIcsi8M92h52rdL5o3NB4XchwM9a7w3M-h3FRx5a4IlKT3LcIdZYBKyeNa1RQxCMBwEOZbkO6Grdzh3YKLz1tDq1Z4rJSeJuinQ5OjzQ8Kfyj6VkWFEc8rU/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}#related .related-posts{font-weight:400;width:53%;float:right}#related .related-posts p{margin:0}#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}#related .related-posts ol{font-weight:400;margin:2px 0 0}#related .subscribe{width:43%;float:left;color:#000}#related .subscribe p.intro{font-weight:400}#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLd0cNk0ghToT09SichnrnQg3Di8KCmcH7nJJvqpM1lIlg5mH0xd5d0cgxmwSYRVNPC_k3ZeFjwLGu_6Y7hqgry3INODXRniwI_Y0qHJ1rpFqalaoW4yc4XDK9d-iYtUNYQdwtK4NMMI/) 0 50% no-repeat;vertical-align:middle}#related .subscribe form{margin:0;padding:0}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}


6.Cari kode di bawah ini ..

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

7.Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if> :


<div class='clearfix' id='related'><div class='subscribe'><p class='feed'><a href='http://disini letakkan Link Feed anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div><div class='related-posts'>disini letakan kode Related Post Anda</div></div>


8.Ganti teks warna merah dengan Link Feed dan kode Form Berlangganan serta Kode Related Post yang Anda punya. Untuk lebih jelas perhatikan contoh di bawah ini:


<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='clearfix' id='related'><div class='subscribe'><p class='feed'><a href='http://cyber-che4t.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=co/vlpg&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=200,height=170&apos;);return true' style='border: 1px solid rgb(204, 204, 204); padding: 3px; text-align: center;' target='popupwindow'><p>Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya</p><p><input name='email' style='width: 140px;' type='text'/></p><input name='uri' type='hidden' value='co/vlpg'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com/' target='_blank'>FeedBurner</a></p><p><a href='http://feeds.feedburner.com/co/vlpg'><img alt='Feed Reader' height='26' src='http://feeds.feedburner.com/~fc/co/vlpg?bg=99CCFF&amp;fg=444444&amp;anim=0' style='border:0' width='88'/></a></p></form> </p></div>
<div class='related-posts'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; -son.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script></div></b:if> </div></div></b:if>


9.Simpan template ..

oke deh sekian dulu artikel kali ini semoga bermanfaat :D

Cara Membuat Subscribe Email Keren Di Blog

Posted by Unknown
Tag :
Cara Memberi Efek Pada Gambar Dengan CSS
Ada banyak cara menghias blog slah satunya yaitu membuat Efek Hover/saat disorot mouse pada link atau gambar, dengan efek hover ini tentunya akan menjadikan blog kita lebih hidup dan akan membuat para pengunjung blog kita jadi betah berlama-lama berada di blog kita. namun jangan salah diantara efek-efek tersebut tentu diantaranya dapat membuat terganggunya pandangan terhadap tulisan-tulisan kita terutama pada efek gambar.
Nah untuk para blogger yang mau memasang efek hover saat ini saya akan berbagi beberapa efek hover dan silahkan para blogger pilih sesuai dengan kesukaan.
Cara Memasang efek Gambar

sebenarnya efek ini sangat menggangu pengunjung yang sedang membaca postingan kita. Tetapi mungkin diantara para blogger menyukai efek ini,  silahkan arahkan mouse anda pada gambar disamping untuk melihat efek ini, dan bagi yang suka efek ini ikuti langkah berikut.
Login blogger
Pergi ke Edit HTML
Beri ceklist pada Expand Widget Templates
Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

1 . Efek Gambar Bergoyang

 


.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}
2 . Efek Gambar Membesar


 
.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

3. Efek Gambar Bayangan

 
.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

4. Efek Gambar Berubah Bentuk

 
.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

5. Efek Gambar Berputar

 
.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5); 
}

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Cara Memberi Efek Pada Gambar Dengan CSS

Posted by Unknown
Tag :
Oke sobat The Pinki Boy pagi hari ini saya mau memberikan ilmu yang baru saja saya dapatkan ..
Yaitu membuat Thread comment unik dan menarik .. :D


Gimana keren gk ? keren dong pasti nya :D
Jika kalian ingin menerapkan nya di blog sobat ,sobat bisa ikuti tutorial di bawah ini ..

1.Login Ke Blogger
2.Klik Template>Edit Html
3.Cari Kode CSS Komentar sobat ,lalu ganti CSS kode sobat dengan kode di bawah ini ..

/* Thread Comments Mummyz */
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}
/* Thread Comments Mummyz End */

4.Simpan Template .. Semoga artikel kali ini bisa bermanfaat bagi kalian semua :D Saya Izin pamit dulu yah .. Byee .. \ (^_^) /

Cara Membuat Thread Comment Keren

Posted by Unknown
Tag :
Terkadang memang jika kita menggunakan Template yang bukan bawaan dari Blogger, widget Atribusi "Diberdayakan Oleh Blogger" ini akan berada di tempat yang tidak kurang tepat, sehingga mengganggu penampilan Blog kita. Tetapi ketika kita ingin menghapus widget tersebut, kita tidak bisa menemukan Tombol untuk menghapus.

Baca Juga : Cara Menghilangkan Navbar Blogger

Widget Atribusi " Diberdayakan Oleh Blogger " memang tidak bisa langsung dihapus di menu tata letak karena memang widget ini masih dalam kondisi "Locked". Jika kita ingin menghapus Widget Atribusi "Diberdayakan Oleh Blogger" ini, kita harus merubah kondisi widget ini agar widget ini tidak lagi dalam kondisi "Locked". Berikut akan saya jelaskan lebih detail langkah - langkahnya.
Baca Juga : Widget Tombol Share Jejaring Sosial Melayang di Blog
Bagaimana Cara Menghapus Widget Atribusi Diberdayakan Oleh Blogger?


Pertama, kita harus merubah kondisi widget ini agar tidak lagi dalam kondisi Locked.
Login ke www.blogger.com.
Langsung saja menuju ke Dashboard blog kamu.
Lalu Pilih Menu Template >> Edit HTML .
Cari Kode di bawah ini dengan menggunakan fasilitas Find (Tekan Ctrl + F dalam kondisi fokus pada Code Box.) :
<b:widget id=’Attribution1′ locked=’true‘ title=” type=’Attribution’>
Ganti kode true menjadi false.
Klik Tombol "Simpan Template".
Kedua, kita Hanya perlu menghapus widget ini dari Menu "Tata Letak".

1 . Pilih Menu Tata Letak. Dan Klik Link / Tombol Edit pada widget Atribusi :

Cara Menghapus Widget Atribusi Diberdayakan Oleh Blogger - 1

2 . Klik Tombol Hapus :

Cara Menghapus Widget Atribusi Diberdayakan Oleh Blogger - 2

3 . Selesai. Sekarang Widget Atribusi Diberdayakan Oleh Blogger telah Terhapus.

Sekian yang dapat saya bagikan Mengenai Cara Menghapus Widget Atribusi Diberdayakan Oleh Blogger. Jika Temen - temen Blogger masih bingung, ada yang ingin ditanyakan, atau ingin mengucapkan terima kasih, silahkan Berkomentar. Jangan Lupa Share ke Jejaring Sosial ya, dengan Like, G+, Share di Twitter dsb. Support Blog ini agar tetap hidup untuk membantu Temen - temen Blogger. Terima Kasih.


Cara Menghapus Widget Atribusi Diberdayakan Oleh Blogger

Posted by Unknown
Tag :
Thread Comment Sederhana Keren !!
Oke sobat mummyz kali ini saya mau memberikan Thread Comment Sederhana ..
Sederhana bukan berarti jelek .. Thread Comment ini pas banget buat kalian yang suka dengan yang simple-simple .. untuk anda yang ingin melihat DEMO nya kalian bisa lihat gambar di bawah ini ..

ss


Gimana simple kan ?? jika kalian ingin menerapkan nya pada blog sobat ,kalian bisa ikuti tutorial di bawah ini .
Masuk ke Blogger
Klik Template > Edit HTML .
Cari kode ]]</b:skin> gunakan CTRL+F untuk memudahkan pencarian kode!
Jika sudah ketemu letakan kode di bawah ini tepat di atas kode ]]</b:skin>

/*-- Mummz Threaded Comments  --*/
.comments {      clear: both;      margin-top: 10px;      margin-bottom: 0px;      line-height: 1em;    }    .comments .comments-content {    font-size: 12px;    margin-bottom: 16px;    font-weight: normal;    text-align:left;    line-height: 1.4em;    }    .comments .comment .comment-actions a {    display: inline-block;    margin: 0;    padding: 1px 6px;    border: 1px solid #C4C4C4;    border-top-color: #E4E4E4;    border-left-color: #E4E4E4;    color: #424242 !important;    text-align: center;    text-shadow: 0 -1px 0 white;    text-decoration: none;    -webkit-border-radius: 2px;    -moz-border-radius: 2px;    border-radius: 2px;    background: #EDEDED;    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );    font: 11px/18px sans-serif;    padding:2px 8px; margin-right:10px;    }    .comments .comment .comment-actions a:hover {    text-decoration: none; background:#fff; border:1px solid #5AB1E2;    }    .comments .comments-content .comment-thread ol {      list-style-type: none;      padding: 0;      text-align: none;    }    .comments .comments-content .inline-thread {      padding: 0.5em 1em;    }    .comments .comments-content .comment-thread {      margin: 8px 0px;    }    .comments .comments-content .comment-thread:empty {      display: none;    }    .comments .comments-content .comment-replies {      margin-top: 1em;      margin-left: 40px;   font-size:12px; background:#EBF5FE;    }    .comments .comments-content .comment {      margin-bottom:16px;      padding-bottom:8px;
    }    .comments .comments-content .comment:first-child {      padding-top:16px;    }    .comments .comments-content .comment:last-child {      border-bottom:0;      padding-bottom:0;    }    .comments .comments-content .comment-body {      position:relative;    }    .comments .comments-content .user {      font-style:normal;      font-weight:bold;    }    .comments .comments-content .user a {    color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;    }    .comments .comments-content .icon.blog-author {      width: 18px;      height: 18px;      display: inline-block;      margin: 0 0 -4px 6px;    }    .comments .comments-content .datetime {    color: #999999;    float: right;    font-size: 11px;    text-decoration: none;    }    .comments .comments-content,    .comments .comments-content .comment-content {      margin:0 0 8px;    }
    .comment-header {background-color: #F4F4F4;        border: thin solid #E6E6E6;        margin-bottom: 5px;        padding: 5px;    }    .comments .comments-content .comment-content {      text-align:none;    }    .comments .comments-content .owner-actions {      position:absolute;      right:0;      top:0;    }    .comments .comments-replybox {      border: none;      height: 250px;      width: 100%;    }    .comments .comment-replybox-single {      margin-top: 5px;      margin-left: 48px;    }    .comments .comment-replybox-thread {      margin-top: 5px;    }    .comments .comments-content .loadmore a {      display: block;      padding: 10px 16px;      text-align: center;    }    .comments .thread-toggle {      cursor: pointer;      display: inline-block;    }    .comments .continue {      cursor: pointer;    }    .comments .continue a {    display: inline-block;    margin: 0;    padding: 1px 6px;    border: 1px solid #C4C4C4;    border-top-color: #E4E4E4;    border-left-color: #E4E4E4;    color: #424242 !important;    text-align: center;    text-shadow: 0 -1px 0 white;    text-decoration: none;    -webkit-border-radius: 2px;    -moz-border-radius: 2px;    border-radius: 2px;    background: #EDEDED;    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );    font: 11px/18px sans-serif;    padding:2px 8px; margin-right:10px;    }    .comments .comments-content .loadmore {      cursor: pointer;      max-height: 3em;      margin-top: 3em;    }    .comments .comments-content .loadmore.loaded {      max-height: 0px;      opacity: 0;      overflow: hidden;    }    .comments .thread-chrome.thread-collapsed {      display: none;    }    .comments .thread-toggle {      display: inline-block;    }    .comments .thread-toggle .thread-arrow {      display: inline-block;      height: 6px;      width: 7px;      overflow: visible;      margin: 0.3em;      padding-right: 4px;    }    .comments .thread-expanded .thread-arrow {      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;    }    .comments .thread-collapsed .thread-arrow {      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;    }    .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;    border: 1px solid #DDDDDD;}    .comments .avatar-image-container img {      width: 36px;    }    .comments .comment-block {      margin-left: 48px;      position: relative;    }
    /* Responsive styles. */    @media screen and (max-device-width: 480px) {      .comments .comments-content .comment-replies {        margin-left: 0;      }    }
    /*------------- Mummyz Threaded Comments  -------------*/


      5.Simpan Template ..

Dan coba lihat hasil nya .. :D
Semoga artikel kali ini bermanfaat untuk kalian semua .. Ingat jika kalian ingin menyebar luaskan artikel ini sertakan sumber !

Thread Comment Sederhana di Blog

Posted by Unknown
Tag :
MY BANNER
Raider Blog 468x60
Raider Blog 88x31
Copyright © 2013 Kamikaze | Powered by Blogger | ReDesign by FajarNajmi | Ori. Djogsz and Renadel Dapize | All Rights Reserved | ↑