Cara membuat kotak unik Serba guna Dibawah postingan

Cara membuat kotak unik Serba guna Dibawah postingan

setelah beberapa minggu shad tidak update artikel mengenai tutorial blogspot, maka kali ini shad akan sedikit share tentang kotak unik dibawah postingan yang shad pakai pada blog shadactivity ini.
baiklah karena lagi males nulis jadi langsung aja liat tutorialnya dibawah ini.

Sepertibiasa pertama login dulu ke blog sobat trus pilih "template-edit html-trus pilih sesuikan".
kalau sudah cari kode ]]></b:skin>
lalu letakan kode berikut ini tepat diatas kode ]]></b:skin>
<br>form.feedburner{<br>margin:20px 0px 0px;<br>display:block;<br>clear:both;<br>}<br>.ktstyle{<br>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrM-HhGu0KYQAx95z82Bsmw-zg9VFZq-0n35T_jnYvzm-BG6K2J-SEk14gw-hcwJt_aMmNpqhRmY3_E7nbSI2hyGJ3RZiVfgwgLQXxH_qqRpas7F_zxmABHCaOG9KQeFLPekWq5LLuKZfP/s400/email_icon.png) no-repeat scroll 4px center;<br>padding:7px 15px 7px 35px;<br>color:#e1e8e5;<br>font-weight:bold;<br>text-decoration:none;<br>border:0px solid #D3D3D3;<br>-moz-border-radius: 4px;<br>-webkit-border-radius: 4px;<br>border-radius: 4px;<br>-moz-box-shadow: 1px 1px 2px #CCC inset;<br>-webkit-box-shadow: 1px 1px 2px #CCC inset;<br>box-shadow: 1px 1px 2px #CCC inset;<br>background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br>background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br>background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );<br>background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>}<br>.ktsubmit{<br>color:#666;<br>font-weight:bold;<br>text-decoration:none;<br>padding:6px 15px;<br>border:1px solid #D3D3D3;<br>cursor: pointer;<br>-moz-border-radius: 4px;<br>-webkit-border-radius: 4px;<br>-goog-ms-border-radius: 4px;<br>border-radius: 4px;<br>background: #fbfbfb;<br>background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br>background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br>background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );<br>background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br>}<br>#emailshad {background:url(http://4.bp.blogspot.com/-1QXZ_GRvF2Y/UJEZeVRkRmI/AAAAAAAADFg/FKtAgUN8y3Q/s1600/email.png) no-repeat;}<br>#emailshad-outer {<br>-moz-border-radius: 10px 10px 10px 10px;<br>-webkit-border-radius: 10px 10px 10px 10px;<br>-goog-ms-border-radius: 10px 10px 10px 10px;<br>border-radius: 10px;<br>background: none repeat scroll 0 0 transparent;<br>border: 1px solid #D3D3D3;<br>padding: 8px;<br>-moz-transition: all 0.3s ease-out;<br>-o-transition: all 0.3s ease-out;<br>-webkit-transition: all 0.3s ease-out;<br>-ms-transition: all 0.3s ease-out;<br>transition: all 0.3s ease-out;<br>width:auto;<br>}<br>#emailshad-outer:hover{<br>background: none repeat scroll 0 0;<br>-moz-box-shadow: 1px 2px 5px #CCC inset;<br>-webkit-box-shadow: 1px 2px 5px #CCC inset;<br>box-shadow: 1px 1px 5px #CCC inset;<br>}<br>#emailshad-outer td{<br>padding:5px 0;<br>}<br>.zoom_icons a{<br>width:40px;<br>height:40px;<br>display:inline-block;<br>text-indent:-9999em;<br>background-position:0px 0;<br>background-repeat:no-repeat;<br>z-index:2000;<br>overflow:hidden;<br>}<br>.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vrt4Wg6I2C_wSNWGF258Xzlg6o9gQqAYwdLFN6ZATlQQ7DNc09wp2bTdHz9ObPq9Hgo7f1Ie0jmcCmt4XGy8S4HzKMy-Xp__fMGufFeONWbDqWsGtzBBk9M7GNzZQYUFfSzj-caRb8Q/s1600/twitter_32.png'); }<br>.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOOF9ueZbVF9nmT2AAvw_ASUyFboZP_SBkcF3R8rLHop2Ibn-a1_FSQ3clX2en101F1KfYdXxj1OHBtPpurzZLjm99cp90IojYeRkAJPQlMeMMniKTgUqXWbhsbR6KsF5-piy_r2QsUE/s1600/delicious_32.png'); }<br>.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji07AeGjQg5KUPDkc96A80HyFLJ8oeQP_DzMQa0DCOBAxZXsxltPm0zIaasxH-inMEukssxfUt5irxCxOUiqG_YenmDLrBpZMNNbhyjb27HFi8DiMqGKzsgLGR9cXMIz8aXqUMFGZ2aoE/s1600/digg_32.png'); }<br>.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeK_xsrvg9rVmOK4fPFRbkiS1urASY5CgHlncsmuvBjOlkz8UsbmqeX1ahGoTkxnAnZHdGG5E0nzY-YHdyT4m-rJmA4ZIGh_Fop4nkt_hxic8xDOBrW1vHWU-pTpJ4htnEPe7tExUwRWc/s1600/facebook_32.png'); }<br>.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1jr2hAFvCZoIW37u92xmSEzGrWoAqt_jYWGIKDbxTslDGEMp9Df7woxSkOJjxPbGC9mdlaPBIH5Fzy-4vTOX1YW6Bs7TI9dzh-vRjBNSygmGc1wDmttEbTbK5sU5QpnqBcwf4O-CBQI/s1600/rss_32.png'); }<br>.lintasme{ background:url('http://4.bp.blogspot.com/-HbaZ1blD6nM/UB_74jucpgI/AAAAAAAAB9Q/GEFIDmIJs6o/s1600/cara-memperbaiki-tombol-lintas-me.png'); }<br>.zoom_icons a:hover{<br>-o-transition: all 0.3s; <br>-moz-transition: all 0.3s; <br>-webkit-transition: all 0.3s;<br>-moz-transform: scale(1.3);<br>-o-transform: scale(1.3);<br>-webkit-transform: scale(1.3); }<br>}<br>

Setelah itu cari kode <data:post.body/> lalu letakan kode beriku ini tepat dibawahnya.
<br><br><br><if cond='data:blog.pageType == "item"'><br><center><div><div><table width="100%"><tbody><tr><td align="left" width="70%"><p>Berlangganan artikel via email!</p></td> <td align="left" width="30%"><p>SHARE This!</p></td> </tr><tr><td><br><br><br><br><span><br><br></span><br><br><br><div href="https://www.facebook.com/rickypesiwarissa" layout="button_count" faces="false" width="50"></div><br><a data-show-count="true" href="https://twitter.com/bboyshad" rel="nofollow">Follow @bboyshad</a><br><br></td> <td><br><div><a expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share" rel="nofollow" target="_blank" title="Twitter">Twitter</a><br><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target="_blank" title="Delicious" rel="nofollow">Delicious</a><br><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target="_blank" title="Digg" rel="nofollow">Digg</a><br><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target="_blank" title="Facebook" rel="nofollow">Facebook</a><br><a href="http://feeds.feedburner.com/ShadActivity" target="_blank" title="RSS" rel="nofollow">RSS</a><br><a expr:href='"http://www.lintas.me/?c=bookmarklet&url=" + data:post.url + "&title=" + data:post.title' target="_blank" title="Lintas.me" rel="nofollow">Lintas.me</a><br></div></td> </tr><tr><td><br><if cond='data:blog.pageType == "item"'><br><div><div><small>Saat ini Anda sedang membaca artikel tentang <strong><u><blog.pagename></blog.pagename></u></strong> dengan url <strong><post.url></post.url></strong><br></small></div></div></if><br></td> <td><div><small><br>Description: <span itemprop="description"><post.title></post.title></span><br>Rating: <span itemprop="rating">5</span><br>Reviewer: <span itemprop="reviewer"><post.author></post.author></span><br>ItemReviewed: <span itemprop="itemreviewed"><post.title></post.title></span></small></div></td> </tr></tbody></table><div align="right"><span><a href="http://shadactivity.blogspot.com/" target="_blank" rel="nofollow">[Get this widget]</a></span><br></div></div></div></center></if><br>
keterangan:
bila <data:post.body/> ada lebih dari satu maka letakan kode diatas tepat dibawah <data:post.body/> yang kedua.
cari kode <a class='twitter-follow-button' data-show-count='true' href='https://twitter.com/bboyshad'>Follow @bboyshad</a> lalu ubah bboyshad dengan nama account twitter sobat.
Demikianlah cara membuat kotak unik serba guna di bawah postingan , bila tutorial ini masih belum jelas atau masih sobat shad masih ada yang bingung sobat bisa langsung berkomentar dan shad akan langsung menjelasankan dimana letak kesalahannya sehingga sobat belum bisa membuat kotak unik dibawah postingan ini. jangan lupa like nya ya bila artikel ini bermanfaat :D

9out of 10 based on 999 ratings.- 1 user reviews.

Anda baru saja membaca artikel yang berkategori dengan judul Cara membuat kotak unik Serba guna Dibawah postingan. Anda bisa bookmark halaman ini dengan URL http://fadlan-news.blogspot.com/2013/01/cara-membuat-kotak-unik-serba-guna.html. Terima kasih!

Ditulis oleh: Share All Info - Jumat, 11 Januari 2013