Bagaimana Solusi Untuk Merapikan Halaman Page Elements

Ini sering boogle alami saat menambah atau mengubah ukuran kolom template, Walaupun pada antar muka-nya saat di preview atau di render ke berbagai browser keliatan mulus tampa cela sedikit pun, Namun pada halaman Page elements-nya (Elemen Halaman) justru kedapatan berantakan, kolom sidebar melorot ke bawah, antar kolom saling tumpang tindih atau tab page elements-nya terpenggal sepotong.




Pernakah saudara mengalami seperti pengalaman boogle ? lalu solusi apa yang biasanya saudara lakukan ?
Sedikit Curhat dari pengalaman

Otre, ini sedikit tip atau curhat dari pengalaman boogle mudah-mudahan dapat membantu teman-teman yang belum paham cara merapikan kolom pada halaman Page Elements-nya.

Petama:

kenali dulu struktur atau basis untuk kolom. dalam minima template secara garis besar ada 4 ( empat ) kolom.
1. Header-Wrapper
2. Main-Wrapper
3. Sidebar-Wrapper
4. Footer

* Note atau untuk div id lainya.

Kedua :

Setelah mengetahui basis kolom di atas. kita tinggal menambah kode yang hanya mengatur pada halaman Page Elements, biasanya kode tersebut boogle simpan tepat di atas tag ]]></b:skin>:

seperti ini.


body#layout #main-wrapper
{ width:300px}
or
Body#layout #Sidebar-Wrapper
{width:200px}

Kadang kalau berantakan bangeut, sering juga memainkan property “float”.

Sedangkan untuk menghilangkan Gadget yang secara otomatis ada pada Page Elements ( Elemen Halaman ) seperti ini.

Penambahan-nya seperti ini..


Body#layout #tulis id-nya {display:none}

display:none = merupakan property+value untuk menon-aktifkan tampilan sebuah id or class



Sekian dulu curhatan dari boogle, kalau ada trik atau cara yang lain untuk artikel di atas, bisa saudara diskusikan di sini.

Read More

Memberi gambar background pada Cbox

Sebelum Memberi gambar background pada Cbox,silahkan kamu membuat buku tamunya dulu klik disini, setelah jadi kamu pilih style presets

Lalu pilih style yang transparan, atur warna text dan link sesuai yang kamu inginkan lalu save,seperti gambar dibawah ini:

Setelah selesei edit kode yang kamu dapat dari cbox tadi! kode cbox biasanya seperti dibawah ini:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="220" height="305" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-616173" style="border:#000000 1px solid;" id="cboxmain5-616173"></iframe></div>
<div><iframe frameborder="0" width="220" height="75" src="http://www5.cbox.ws/box/?boxid=616173&amp;boxtag=fp1wb6&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-616173" style="border:#000000 1px solid;border-top:0px" id="cboxform5-616173"></iframe></div>
</div>
<!-- END CBOX -->

<div id="cboxdiv" style="text-align: center; line-height: 0;background-position:center;background:url(url gambar kamu);width:220px;height:305px;background-repeat:no-repeat;">

Pada kode yang berwarna hijau silahkan ganti dengan url gambar yang kamu inginkan,dan ukuran yang berwarna merah silahkan sesuaikan dengan ukuran cbok kamu,nih ada beberapa gambar background yang bisa kamu pakai juga.

http://www.bestiphonewallpapers.com/bulkupload/081109/Cartoon/PinkHelloKitty.jpg
http://www.dreamstime.com/blue-background-thumb2315107.jpg
http://www.dreamstime.com/floral-background-thumb4863792.jpg

setelah semua selesei silahkan pasang di blog sobat,kamu bisa membuat buku tamumu secara tersembunyi juga boleh..selamat mencoba!

Source : http://infonetmu.blogspot.com

Read More

Cara Membuat Related Post Di Blogger

1. Login ke blog kamu,klik rancangan,edit html jangan lupa centang expand template, lalu kamu cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas kode ]]></b:skin>

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#E0F5FF;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background:url(http://4.bp.blogspot.com/-q-HyNrgjvAE/TzQx3btIV4I/AAAAAAAABbU/PXVhFzfCOwg/s400/star.gif) no-repeat 0 7px;}

2. Langkah berikutnya kamu cari kode <div class=’post-footer-line post-footer-line-1′> kalau tidak ada, alternatifnya cari kode ini <p class=’post-footer-line post-footer-line-1′> dan letakkan kode berikut tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Post:</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
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; json.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;data2007&#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>
</div>
</b:if>

3. Simpan template kamu. selamat mencoba  :D

Read More