tag:blogger.com,1999:blog-62379179072925051492024-03-12T20:46:34.856-07:00WELCOMETips & Trick Blog |
Tutorial Blogspot | Download Template | add Gadget / Widget
Anonymoushttp://www.blogger.com/profile/01876885564432570642noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-6237917907292505149.post-55359490937558690092013-08-16T05:28:00.003-07:002013-08-16T05:28:44.293-07:00Cara Membuat Related Post Dengan Thumbnail Di Blogger<h3>
Cara Membuat Related Post Dengan Thumbnail Di Blogger</h3>
<br />
<br />
<br />
<br />Pertama masuk ke Blogger terus pilih <b>Template</b> lalu klik <b>Edit HTML</b> dan teken <b>Ctrl + F</b> di keyboard kemudian cari kode <span style="background-color: #cccccc;"></head></span> lalu centang <b>Expand Widget Templates</b> gan, abis itu loe pastein kode di bawah ini di atasnya.<br />
<br />
<br />
<pre class="code"><code><!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
<span style="background-color: #ea9999;">padding-left:</span></code> 5px;<code>
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
<span style="background-color: #9fc5e8;">background-color:</span></code>#d4eaf2;<code>
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPTBkx05x40XAuxZUXpW06rMDjVwIXuBV1Ym3nU2s4cAMoLQMrNsuk2NqM0NppgYLfgo0BCjYR6SR8nPyKI6FcZdcA7pzSxAETYOgUh5ckpfxVX5h9r1ezvrcvahCHkH621LgfqypsdQU/s1600/images.jpg&quot;;
<span style="background-color: yellow;">var maxresults</span></code>=10;<code>
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;<span style="background-color: lime;">Postingan Terkait</span>&quot;;
</script>
<script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai--></code></pre>
<br />
<ul>
<li>Kalo udah jangan di save dulu sekarang loe cari kode <span style="background-color: #cccccc;"><div class='post-footer-line post-footer-line-1'></span> atau <span style="background-color: #cccccc;"><p class='post-footer-line post-footer-line-1'></span>
gan. Setelah itu paste kode di bawah ini tepat di bawahnya gan. Loe
tinggal pilih kode related post dengan thumbnail yang statis ato yang
bergerak ( marque ) gan.</li>
</ul>
<br />
<h4>
» Kode Related Post Dengan Thumbnail Statis</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjYbS9ldriM7-N2DhIszeJcvas2z2c1Ymkgb7QqcDcjr3ZM5xaeU-567oAJKbL7O2nkN8wL9OsJSleOxeNS1EvhT-pEI0pnvUxC2uQDiNozC1l7E8DvJb-KjNkPCbZteMEMEKeRM8m2p3/s1600/related+post+dengan+thumbnails.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjYbS9ldriM7-N2DhIszeJcvas2z2c1Ymkgb7QqcDcjr3ZM5xaeU-567oAJKbL7O2nkN8wL9OsJSleOxeNS1EvhT-pEI0pnvUxC2uQDiNozC1l7E8DvJb-KjNkPCbZteMEMEKeRM8m2p3/s1600/related+post+dengan+thumbnails.jpg" /></a></div>
<br />
<br />
<pre class="code"><code><!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<span style="background-color: orange;">max-results</span>=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai--></code></pre>
<br />
<br />
<h4>
» Kode Related Post Dengan Thumbnail Bergerak / Marque</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJtbsyhJViwlZ83R5JSvaOcV8B7hFTb-i5Ykz2OyqDAkmbW77S2mpubyXewNdmqcBM7jUaAOh43U4zqqgUjjfBdvn964aL7OC__kbBpSQCg89TmqGWhY0D6ONfqYhUCGFdio6EDfbutzT/s1600/related+post+dengan+marque.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJtbsyhJViwlZ83R5JSvaOcV8B7hFTb-i5Ykz2OyqDAkmbW77S2mpubyXewNdmqcBM7jUaAOh43U4zqqgUjjfBdvn964aL7OC__kbBpSQCg89TmqGWhY0D6ONfqYhUCGFdio6EDfbutzT/s1600/related+post+dengan+marque.jpg" /></a></div>
<br />
<br />
<pre class="code"><code><!--Postingan Terkait Dengan Gambar Kode Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;</code><span style="background-color: orange;">max-results</span>=11<code>&quot;' type='text/javascript'/>
</b:if></b:loop>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script>
<script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai--></code></pre>
<br />
<ul>
<li>Abis dipastein sekarang diedit gan. Buat ngatur posisi judulnya loe edit <span style="background-color: #ea9999;">padding-left:</span> semakin besar semakin ke kanan dan buat ganti judulnya edit <span style="background-color: lime;">Postingan Terkait</span> gan. Terus buat ngerubah warna hover edit aja <span style="background-color: #9fc5e8;">background-color:</span> ganti sama warna yang laen sesuai selera loe.</li>
</ul>
<ul>
<li>Kalo buat <span style="background-color: yellow;">var maxresult</span> sama <span style="background-color: orange;">max-result</span> ganti aja sesuka hati mau berapa jumlah <a href="http://seociyus.blogspot.com/2013/01/cara-membuat-related-post-dengan-thumbnail.html">related post</a> yang ditampilin gan. Beres ngedit sekarang tinggal <b>Save template</b> gan dan buka blog loe pasti udah ada related post dengan thumbnail nya sekarang.</li>
</ul>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br />Sumber: <a href="http://seociyus.blogspot.com/2013/01/cara-membuat-related-post-dengan-thumbnail.html#ixzz2c8OtJLph" style="color: #003399;">http://seociyus.blogspot.com/2013/01/cara-membuat-related-post-dengan-thumbnail.html#ixzz2c8OtJLph</a>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6237917907292505149.post-47984034927347311432013-07-18T06:21:00.004-07:002013-08-04T05:13:30.261-07:00Cara buat floating Menu sendiri<div style="background-color: #ffffffcafa; border: 2px #006400 dashed; padding: 10px; text-align: left;">
<pre id="line1"> <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoC7oyVdUPnAhURnuHJAboLl8NXik7fCoC1eFDONs9lLMcH0odpTtBK7JHiODTKPP9ltYjcbOiVultAlL-J63Bt-Sy0FvgR9t9vOIS_32nEoHuH9ytk-gQPHure1Aw2_EyhQLrm6pFz4/s1600/adminccv2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoC7oyVdUPnAhURnuHJAboLl8NXik7fCoC1eFDONs9lLMcH0odpTtBK7JHiODTKPP9ltYjcbOiVultAlL-J63Bt-Sy0FvgR9t9vOIS_32nEoHuH9ytk-gQPHure1Aw2_EyhQLrm6pFz4/s1600/adminccv2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</pre>
<pre id="line1"> </pre>
<pre id="line1">/* Floating Menu
----------------------------------------------- */
#top-menuwrapper{background-color: #fff;border-top:3px solid #01a279;box-shadow: 0px 1px 2px rgba(0,0,0,0.3);height:76px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #01a279}
#top-menuwrap{width:1100px;margin:0 auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;margin-right:250px}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:30px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#555;}
.logo{float:left;background:#fff;}
.logo img{margin-top:-16px;}
/* Kotak Pencarian
----------------------------------------------- */
#search-wrapper{float:right;padding-right:210px;}
#search-form-feed {
width:210px; /* lebar kotak penelusuran */
position:fixed;
top:26px;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
z-index:9999;
}
#feed-q-input {
display:block;
width:80%;
border:1px solid #ccc;
background-color:white;
padding:5px 5px;
font:normal normal 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
}
#feed-q-input:focus {
border-color:#009f77;
color:#333;
outline:none;
}
#sbutt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWMzMACbJUxeqgUwl68_riZE9FrQjjcVMws3YrLKgTKD-AtHI9Ue_eirIwoUNOjSm_XpIIUCVpbKeLkbM5IFwcXAJXGUrw55Ym_-KuoIHxXdBQvInpIDkpdqMzECWSVUwR8CNrw5_IW4/s1600/search-henry.png)no-repeat;
color:none;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0;
border:none;
width:28px;
height:28px;
cursor: pointer;
margin-top:-28px;
float:right;
}
#search-result-container {
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#f2f2f2;
border:1px solid #ddd;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
display:none;
}
#search-result-container mark {
background-color:yellow;
color:black;
}
#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}
#search-result-container a:hover {
color:#052748;
}
#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}
#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
text-align:left;
}
#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px 2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:999;
background-color:#01a279;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}</pre>
<pre id="line1"> </pre>
<pre id="line1">Letakan Diatas <span style="color: red;">]]></b:skin> </span></pre>
<pre id="line1"></pre>
<pre id="line1"><div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='http://henry-multimedia-informasi.blogspot.com/' target='_blank'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIH7eJZ6YYu-sAmwIEHdDY-DOhMy0-eWXUoe5FSf3Kg1K5f7N2k0PCqUKQvF2BmNKmobgC8guVRx7a1r-5io_lnxcge1pbSd6QPcCX6gu0kAOl9P5V8QsI-lnySlDpd_rXUQ4ekGT8js/s1600/henrylogo.png' style='padding:0px;'/></a>
</div>
<ul>
</ul>
</div>
</div>
</div></pre>
<pre id="line1"></pre>
<pre id="line1">letkan di bawah <span style="color: red;"></head> </span></pre>
<pre id="line1"><span style="color: red;"> </span><<span class="start-tag">div</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">top-menuwrap</a>'>
<span id="line430"></span><<span class="start-tag">div</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">search-wrapper</a>'>
<span id="line431"></span><<span class="start-tag">div</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">search-form-feed</a>'>
<span id="line432"></span><<span class="start-tag">form</span> <span class="attribute-name">action</span>='<a class="attribute-value" href="view-source:http://henry-multimedia-informasi.blogspot.com/search">/search</a>' <span class="attribute-name">onsubmit</span>='<a class="attribute-value" href="http://www.blogger.com/null">return updateScript();</a>'>
<span id="line433"></span><<span class="start-tag">input</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">feed-q-input</a>' <span class="attribute-name">name</span>='<a class="attribute-value" href="http://www.blogger.com/null">q</a>' <span class="attribute-name">onfocus</span>='<a class="attribute-value" href="http://www.blogger.com/null">this.value=<span class="entity">&#39;</span><span class="entity">&#39;</span>;</a>' <span class="attribute-name">onkeyup</span>='<a class="attribute-value" href="http://www.blogger.com/null">resetField();</a>' <span class="attribute-name">type</span>='<a class="attribute-value" href="http://www.blogger.com/null">text</a>' <span class="attribute-name">value</span>='<a class="attribute-value" href="http://www.blogger.com/null">Cari di sini...</a>'/><<span class="start-tag">input</span> <span class="attribute-name">class</span>='<a class="attribute-value" href="http://www.blogger.com/null">btnSearch</a>' <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">sbutt</a>' <span class="attribute-name">type</span>='<a class="attribute-value" href="http://www.blogger.com/null">submit</a>' <span class="attribute-name">value</span>=''/>
<span id="line434"></span></<span class="end-tag">form</span>>
<span id="line435"></span><<span class="start-tag">div</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">search-result-container</a>'></<span class="end-tag">div</span>>
<span id="line436"></span><<span class="start-tag">div</span> <span class="attribute-name">id</span>='<a class="attribute-value" href="http://www.blogger.com/null">search-result-loader</a>'>Loading...</<span class="end-tag">div</span>>
<span id="line437"></span></<span class="end-tag">div</span>>
<span id="line438"></span><<span class="start-tag">script</span> <span class="attribute-name">type</span>='<a class="attribute-value" href="http://www.blogger.com/null">text/javascript</a>'>
<span id="line439"></span>//<![CDATA[
<span id="line440"></span>var searchFormConfig = {
<span id="line441"></span> url: "http://henry-multimedia-informasi.blogspot.com/", // URL Blog
<span id="line442"></span> numPost: 9999, // Jumlah maksimal temuan
<span id="line443"></span> summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
<span id="line444"></span> summaryLength: 400, // Jumlah karakter ringkasan posting
<span id="line445"></span> resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian
<span id="line446"></span> noResult: "Tidak Di Temukan!!!", // Deskripsi 'tak ditemukan'
<span id="line447"></span> resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
<span id="line448"></span> thumbSize: 40, // Ukuran & resolusi thumbnail
<span id="line449"></span> fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
<span id="line450"></span>};
<span id="line451"></span>//]]>
<span id="line452"></span></<span class="end-tag">script</span>>
<span id="line453"></span><<span class="start-tag">script</span> <span class="attribute-name">src</span>='<a class="attribute-value" href="view-source:http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js">http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js</a>' <span class="attribute-name">type</span>='<a class="attribute-value" href="http://www.blogger.com/null">text/javascript</a>'></<span class="end-tag">script</span>>
<span id="line454"></span></<span class="end-tag">div</span>></<span class="end-tag">div</span>></pre>
<pre id="line1"> </pre>
<pre id="line1">Letakan Di bawah <span style="color: red;"><body> </span></pre>
</div>
<div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6237917907292505149.post-3559343089214075562013-04-29T08:20:00.002-07:002013-07-19T06:17:10.791-07:00Cara Mengganti Background Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tUVk_WUyR0Jk7-trG83qcS257Ubkk7LhAQP2CD9Wn4ZYTQCoaM77H97II3UVco-Tb88AySgnZDnrCQ54fTg5OifKGARl9_pxILcr3YssLjqIpWjYa2if6AsN0wURv0quQlW1xGKqZCU/s1600/background0188.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tUVk_WUyR0Jk7-trG83qcS257Ubkk7LhAQP2CD9Wn4ZYTQCoaM77H97II3UVco-Tb88AySgnZDnrCQ54fTg5OifKGARl9_pxILcr3YssLjqIpWjYa2if6AsN0wURv0quQlW1xGKqZCU/s1600/background0188.jpg" height="256" width="320" /></a></div>
<br />
<ul>
<li>Cari kode <span style="color: red;">.body</span> atau kadang-kadang ada template yang menggunakan <span style="color: red;">#body </span>atau jika masih tidak ketemu juga cari kata<span style="color: red;"> body</span> tanpa titik dan tanpa tanda pagar.</li>
<li>Nantinya akan muncul kode seperti ini :</li>
</ul>
<div>
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
<pre>body{<span style="color: red;">background:#333333</span>;
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;</pre>
<pre>}</pre>
</div>
<br />
<ul>
<li>Anda lihat pada kode di atas, ada kode background:#333333; itu
artinya background blog saya saat ini berwarna abu-abu gelap. karena
#3333333 adalah kode warna untuk warna abu-abu. </li>
<li>Kode tersebut bisa anda ganti sesuai keinginan anda. Untuk kumpulan kode warna anda bisa lihat di <a href="http://digitalareas.blogspot.com/2012/12/kode-html-warna-dan-cara-membuat.html" target="_blank">Kode HTMLWarna</a></li>
</ul>
<div>
Lalu bagaimana jika ingin mengganti background blog dengan gambar ?
caranya masih sama. Hanya saja diberikan beberapa tambahan. Contohnya
seperti di bawah :</div>
<div>
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
<pre>body{<span style="color: red;">background:url (link gambar)</span>;
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
}</pre>
</div>
</div>
<ul>
<li style="text-align: justify;">Bagian di dalam kurung yang bertuliskan
LINK GAMBAR itu isikan dengan link dari gambar yang ingin dijadikan
background. Anda juga dapat menmbahkan kode <span style="color: red;">repeat-x top left fixed;</span>
setelah tanda tutup kurung. Gunanya adalah untuk membuat gambar anda
menjadi tetap dan tidak tergeser ketika anda melakukan scroll pada
mouse. Contohnya seperti ini :</li>
</ul>
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
<pre>body{<span style="color: red;">background:url (link gambar)</span><span style="color: red; text-align: justify;">repeat-x top left fixed;</span></pre>
<pre>margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
}
</pre>
</div>
</div>
<div>
Selain itu anda juga bisa menggunakan keduanya. Bisa memasukan warna
pada background dan juga gambar. Dalam hal ini tetap background gambar
yang akan muncul, tapi gunanya menyertakan warna juga disitu adalah
untuk mencegah apabila link gambar yang anda sertakan suatu saat tidak
bisa dibuka. Jadi warna tersebut yang akan muncul menjadi background
anda. Kode nya seperti ini :</div>
<div>
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 400px;">
<pre>body{<span style="color: red;">background: #333333 url (link gambar);</span>
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
</pre>
<pre>}</pre>
</div>
</div>
<ul>
<li>Setelah anda melakukan modifikasi terhadap kode-kode di atas. SIMPAN template anda dan lihat tampilan blog anda sekarang.</li>
</ul>
<div class="adsensecontenbotton">
</div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6237917907292505149.post-72484567613515136322013-04-29T08:18:00.001-07:002013-04-29T08:18:58.335-07:00Cara Membuat Recent Post Berjalan di BlogRecent post atau dalam bahasa indonesianya <b>posting terakhir atau artikel terkini</b> adalah <i>widget</i> yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.<br />
Recent post biasanya menampilkan sejumlah <i>judul artikel</i> yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang <u><b>bergerak ( animasi ) ke bawah</b></u>. Contohnya sobat bisa lihat di sidebar blog ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQM4cFoBLgaZPlvFxfRrSAWssXMj6zsjZQ5d7vl-V4nHMMQx0r292Np8otaKSYH9Pbmoi7olmlChphTVhAf3JxNuUlMVvhbo0hbwE6e0Bv_j3zzhyphenhyphenG8QKiiV3r-GByrmOyZdDDE_TNHFfr/s1600/2222.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQM4cFoBLgaZPlvFxfRrSAWssXMj6zsjZQ5d7vl-V4nHMMQx0r292Np8otaKSYH9Pbmoi7olmlChphTVhAf3JxNuUlMVvhbo0hbwE6e0Bv_j3zzhyphenhyphenG8QKiiV3r-GByrmOyZdDDE_TNHFfr/s1600/2222.bmp" width="279" /></a></div>
<br />
Kali ini saya akan kasih tahu bagaimana <b>cara memasang recent post di blog</b>. Sobat yang berminat silahkan ikuti tutorial berikut.<br />
<br />
1. Log in ke akun blog sobat.<br />
2. Klik rancangan --> Tata letak --> Tambah gadget --> HTML/Javascript<br />
3. Masukkan kode berikut ke dalam konten.<br />
<br />
<br />
<div style="background: #f2f2f2; border: 3px solid #0000ff; height: 150px; overflow: auto; padding: 15px;">
<style type="text/css"><br />
#rp_plus_img{height:377px;}<br />
#rp_plus_img li {height:60px;padding:5px;list-style:none;<br />
background-color:#ffffff;<br />
border:solid 1px #000000;}<br />
#rp_plus_img a{color:#00000;}<br />
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;<br />
text-align:justify;<br />
-moz-border-radius: 5px;}<br />
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}<br />
<br />
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><br />
</script><br />
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"><br />
</script><br />
<script type="text/javascript"><br />
var speed = 1500;<br />
var pause = 3500;<br />
$(document).ready(function(){<br />
rpnewsticker();<br />
interval = setInterval(rpnewsticker, pause);<br />
});<br />
<br />
</script><br />
<ul id="rp_plus_img"><script><br />
var numposts = 5;<br />
var numchars = 0;<br />
<br />
</script> <script
src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"><br />
</script> </ul><br />
<small><a
href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html"
target="_blank">get this widget here</a></small></div>
4. Klik Simpan/Save<br />
5. Selesai.<br />
6. Semoga Bermanfaat...
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6237917907292505149.post-74944388114173886552013-04-29T08:17:00.001-07:002013-07-18T06:12:56.702-07:00 Cara Memberi Efek Zoom Pada Gambar Di Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAfZ7ej6QoOAgXG0dRslEtwpyZa61vVFaHlPI0AMwTDjCNIyRQF98Xj5DDQwDx4XdTIeLbZ48_eSsu-PjQ3bRpi-pu9ZMkzP0PCS1veRyBvKYuqqxHxXK13ekBlt9jyhbqXhTO_HUSGM/s1600/background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAfZ7ej6QoOAgXG0dRslEtwpyZa61vVFaHlPI0AMwTDjCNIyRQF98Xj5DDQwDx4XdTIeLbZ48_eSsu-PjQ3bRpi-pu9ZMkzP0PCS1veRyBvKYuqqxHxXK13ekBlt9jyhbqXhTO_HUSGM/s320/background.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzVPjA1c_HPjRr2G37aKXSB4OqmaXUQAZluk2obkCWVxuGJnLI1L38TrywwgGSplHZQhxrmaKba3eIHNv9Sv_PamJi2x07Jtu6qVi8wr6taRVpveKdluV6l_BiWFuG6j_P5PZsJtN6Q7fg/s1600/loupe-zoom.jpg" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<br />
<div style="text-align: justify;">
<u style="font-weight: bold;">Cara Memberi Efek Zoom Pada Gambar Di Blog,</u><span style="font-weight: bold;"> </span><span style="font-weight: bold;"></span>Pada Postingan Sebelumnya saya memposting Cara memberi efek zoom berputar di blog, dan sekarang saya akan memposting <u style="font-weight: bold;">Cara Memberi Efek Zoom Pada Gambar Di Blog</u><span style="font-weight: bold;"> , Apakah Berbeda?</span> yahh jelas berbeda dong sobb..<b>Apa Bedanya? </b>bedanya adalah jika <u>Cara memberi efek zoom berputar di blog</u> saat cursor menyentuh gambar akan memberi efek berpuar sekaligus gambarnya nge-zoom, tetapi jika <u style="font-weight: bold;">Cara Memberi Efek Zoom Pada Gambar Di Blog</u><span style="font-weight: bold;"> </span>gambarnya hanya nge-zoom doang dan tidak berputar, langsung aja ke tutorialnya<span style="font-weight: bold;"><br /></span></div>
<br />
<div style="text-align: justify;">
<u>
</u></div>
<div style="text-align: justify;">
1. Login ke Blog anda</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
2. Masuk menu Edit HTML</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
3. Cari kode ]]></b:skin></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
4. Letakan kode dibawah ini tepat diatas kode ]]></b:skin></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<div style="border: 3px solid #000000; height: 125px; overflow: auto; padding: 5px; width: auto;">
.post img, table.tr-caption-container { border:none; max-width:560px;
height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s;
-webkit-transition: all 0.5s; } .post img:hover { -o-transition: all
0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform:
scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px /
0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
5. Simpan template<br />
6. Semoga Bermanfaat, Selamat Nge-Blog </div>
</div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6237917907292505149.post-47885502555376569862013-04-25T00:08:00.000-07:002013-06-12T18:12:25.730-07:00Sejarah dan Asal Usul Kubus Rubik (Rubik’s Cube)<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://t1.gstatic.com/images?q=tbn:JXSJtZzNqrqbtM:http://swidodo.files.wordpress.com/2010/04/rubik_s_cube.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="http://t1.gstatic.com/images?q=tbn:JXSJtZzNqrqbtM:http://swidodo.files.wordpress.com/2010/04/rubik_s_cube.png" height="130" width="125" /></a></div>
Sebelum menjelaskan tentang sejarah rubik, kita ketahui dulu apa itu rubik?<b>. Kubus Rubik</b> (Rubik’s Cube) adalah sebuah teka-teki berantai (<i>puzzle</i>)
mekanis yang berbentuk kubus dimana setiap sisinya dibagi menjadi 9
buah kotakan-kotakan kecil yg memiliki kelompok warna awalan yang sama
untuk masing-masing sisinya (putih, merah, biru, oranye, hijau dan
kuning) dan dapat diputar sedemikian rupa sehingga menghasilkan
kotakan-kotakan yang acak di masing-masing sisinya. Cara memainkannya
adalah dengan mengacak dan mengembalikan kotakan-kotakan tersebut ke
sisi-sisi yang sebenarnya sesuai dengan kelompok warnanya.</div>
<br />
<b>Kubus Rubik</b> adalah sebuah teka-teki mekanik ditemukan pada 1974 oleh pemahat dan profesor arsitektur Hungaria <b>Ernő Rubik.</b>
Permainan Rubik diberi nama oleh penciptanya “Magic Cube” dan
dipatenkan tahun 1975 di Hungaria. Meskipun begitu sebelumnya telah ada
paten yang serupa di Kanada 1972 dan di Inggris 1974. Awalnya Rubik
diciptakan sebagai alat pembelajaran bagi siswanya untuk menerangkan
tentang objek 3D di tempatnya om Rubik ini bekerja di Department of
Interior Design, Academy of Applied Arts and Crafts di Budapest sana.
Kubus Rubik sejak awal dilisensikan kepada perusahaan Ideal Toys dan
sejak tahun 1980 mengawali karir internasionalnya di London, Paris,
Nuremberg (<i>wherever it is</i>) dan New York, termasuk produk2 bajakannya… oke imitasi lebih<br />
halusnya. Teknologi Rubik ini sempat pula mengalami sengketa hak
paten dari si orang Kanada diatas dan juga orang Jepang , tetapi
akhirnya om Rubik bisa mendapatkan US patent-nya pada tahun 1983. Pada
tahun 2003 ada seorang penemu dari Yunani yg menemukan cara untuk
membuat sejenis kubus rubik dengan tingat kotakan dari 5×5 sampai 11×11.
Bila cermat dihitung jumlah kombinasi tingkat keacakan kubus rubik
berkisar antara 43,252,003,274,489,856,000 (4.3×10^19) hingga
88,580,102,706,155,225,088,000 (8.9×10^22).<br />
Ada beberapa orang yang mempelajari teknik2 memecahkan teka-teki kubus siluman ini seperti: <b>David Singmaster</b> dan <b>Alexander Frey</b> (1982 – kurang dalam 1 menit), <b>Daniel Kunkle</b> dan <b>Gene Cooperman</b> (kurang dari 26 langkah menggunakan komputer), <b>Tomas Rokicki</b> ( kurang dari 22 langkah), <b>Jessica Fridrich</b> (kutukan siluman rubik 55 langkah), <b>Philip Marshall</b> ( 65 langkah), <b>Lars Petrus</b> dan yang paling fenomenal adalah <b>Yu Nakajima</b> (menyelesaikan 10 rubik dalam 2.36 menit).<br />
<div style="text-align: center;">
</div>
<div style="text-align: center;">
Karena begitu menariknya permainan ini,
maka diselenggarakanlah kompetisi rubik pertama kali oleh Guinness Book
of World Records di Munich, 13 Maret 1981 dengan pemenang Jury Froeschl,
dengan catatan waktu 38 detik setelah diacak 40 kali (<i>what the …</i>). Dan Lomba internasional pertama di Budapest 5 Juni 1982, pemenangnya Minh Tai, dengan catatan waktu 22.95 detik.</div>
Mungkin karena orang semakin cerdas semenjak VGA card dikeluarkan
oleh IBM , permainan rubik menjadi sudah tidak menarik lagi untuk
dikompetisikan dengan cara biasa, saat ini kompetisi dimainkan dengan
cara yang agak nyeleneh yaitu: rubik buta (pemain diberi waktu melihat
rubik yang sudah diacak, lalu memecahkannya dengan mata tertutup, rubik
buta secara tim, memecahkan rubik didalam air dengan satu tarikan napas,
rubik dengan satu tangan, maupun rubik dengan satu kaki.<br />
<b></b>Kubus ini terbuat dari plastik terdiri dari 26 kubus
kecil yang berputar pada poros yang terlihat. Setiap sisi dari kubus
ini memiliki sembilan permukaan yang terdiri dari enam warna yang
berbeda. Ketika teka-teki ini terpecahkan setiap sisi dari kubus ini
memiliki satu warna dan warna yang berbeda dengan sisi lainnya.Kubus ini
dibuat kembali pada <a href="http://korananakindonesia.wordpress.com/wiki/1980" title="1980">1980</a>
dan dipasarkan di dunia Barat pada Mei. Dan dikatakan merupakan mainan
paling banyak terjual di dunia, dengan sekitar 300 juta kubus Rubik dan
imitasinya terjual. <b>Rekor</b>tercepat dalam menyelesaikan
Kubus Rubik (Rekor Indonesia) berhasil dicetak pada acara HUT MURI
(Museum Rekor-Dunia Indonesia) pada tanggal 31 Januari 2007 di Hotel
Grand Candi, Semarang. Catatan waktu yang dibukukan adalah 19,33 detik
atas nama Abel Brata Susilo.<br />
Definisi <b>speedcubing</b> adalah menyelesaikan Kubus
Rubik dalam waktu secepat mungkin (dihitung waktunya). Di Indonesia
sendiri speedcubing belum terlalu populer. Meskipun begitu, ada
sekelompok anak-anak muda Jakarta yang memiliki hobi speedcubing,
akhirnya sepakat membentuk JRCC (Jakarta Rubik’s Cube Club). Visi mereka
adalah memopulerkan speedcubing agar sejajar dengan olahraga yang lain
seperti catur, billiard, renang, dan sebagainya. Melalui misi mengadakan
kompetisi-kompetisi dan kegiatan-kegiatan speedcubing baik yang
bertaraf lokal maupun internasional. Sekretariat dan Pusat Pelatihan
JRCC beralamat di LTC (Lindeteves Trade Center) Glodok, Lantai UG.<br />
Rubik banyak ditemui di tempat-tempat penjualan mainan hanya saja,
belakangan terlalu banyak toko yang mulai tidak mnejual rubiks ini,
karena dianggap mainan kuno. Justru kalau pun ada, rubik terjual dengan
sudah tertempelkan gambar Naruto dan lain lainnya yang dari kertas,
sehingga dengan mudah kertas tersebut aus. Begitupula dengan Puzzle 15
karakter yang dulu pernah muncul, sekarang hanya muncul dalam bentuk
software. Harga rubik versi mainan berkisar antara 8000 rupiah – 10000
rupiah. Rubik asli bisadidapatkan informasi dari internet, bisa berharga
10 dollar keatas untuk 3×3×3.<br />
<h4>
Trik Permainan Rubik Bagi Pemula<b><br />
</b></h4>
<br />
<img alt="Trik Bermain Rubik" class="aligncenter" src="http://rengkodriders.files.wordpress.com/2012/03/hal1.png?w=458&h=507" height="507" title="Trik Bermain Rubik" width="458" /><br />
<h4>
Macam-macam Rubik</h4>
<img alt="http://folk.uio.no/klara/puzzles/mypuzzles2.jpg" src="http://folk.uio.no/klara/puzzles/mypuzzles2.jpg" height="538" width="720" /><br />
<h4>
Rubik Cube Paling Rumit</h4>
Bagi yang ngerasa rubik cube 3 x 3, 4×4, 5×5, atau mungin pyraminx
(rubik cube berbentuk prisma segitiga) terlalu mudah diselesaikan dan
tidak menantang lagi, lo harus nyoba yang satu ini. pentaminx, adalah
rubik cube yang mempunyai 12 sisi dengan 975 bagian kecil. tidak lupa
dengan 1212 stiker yang harus dipasang sendiri satu-persatu jason smith,
designer pentaminx menghabiskan waktu 75 jam untuk menghasilkan rubik
gila ini.<br />
<img alt="http://www.recklessreality.com/wp-content/uploads/2009/03/rubiks_cube_from_hell_007.jpg" src="http://www.recklessreality.com/wp-content/uploads/2009/03/rubiks_cube_from_hell_007.jpg" /><br />
<img alt="http://www.dixiworld.com/wp-content/uploads/2009/03/rubiks_cube_from_hell_003.jpg" src="http://www.dixiworld.com/wp-content/uploads/2009/03/rubiks_cube_from_hell_003.jpg" /><br />
<img alt="http://karhoe.net/images/stories/2009/pentaminx/picturea_007.jpg" src="http://karhoe.net/images/stories/2009/pentaminx/picturea_007.jpg" /><br />
<img alt="http://i370.photobucket.com/albums/oo145/DMCalzone/PETAMINX001.jpg" src="http://i370.photobucket.com/albums/oo145/DMCalzone/PETAMINX001.jpg" height="360" width="480" /><br />
Sumber: <a href="http://www.adipedia.com/sejarah-dan-asal-usul-kubus-rubik-rubiks-cube/">http://www.adipedia.com/sejarah-dan-asal-usul-kubus-rubik-rubiks-cube/</a>
<!-- Blogger automated replacement: "https://t1.gstatic.com/images?q=tbn:JXSJtZzNqrqbtM:http://swidodo.files.wordpress.com/2010/04/rubik_s_cube.png" with "https://t1.gstatic.com/images?q=tbn:JXSJtZzNqrqbtM:http://swidodo.files.wordpress.com/2010/04/rubik_s_cube.png" --><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2Ft1.gstatic.com%2Fimages%3Fq%3Dtbn%3AJXSJtZzNqrqbtM%3Ahttp%3A%2F%2Fswidodo.files.wordpress.com%2F2010%2F04%2Frubik_s_cube.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://t1.gstatic.com/images?q=tbn:JXSJtZzNqrqbtM:http://swidodo.files.wordpress.com/2010/04/rubik_s_cube.png" -->Unknownnoreply@blogger.com0