Prosedur Modifikasi MINIMA (III)

Merombak susunan Header.

Pada kesempatan Prosedur Modifikasi Minima (III) kali ini kita akan membahas bagaimana kita merombak susunan headernya, yang semula utuh akan kita bagi menjadi dua ruang.

Langkah yang harus kita lakukan adalah mengganti susunan Header Minima asli dari :

/* Header
-----------------------------------------------
*/

#header-wrapper {
...... dst ..... s/d ......


#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

dengan kode dibawah ini :

#header {
background: #ff55dd url(http://i288.photobucket.com/albums/ll179/ahnning/hdbg.png);
width: 980px;
height: 100px;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
}
#header h1 a, #header h1 a:visited {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
#header h1 a:hover {
color: #FFF;
text-decoration: none;
}
#header h3 {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0;
padding: 0;
}

#header p {
color: #FFF;
padding: 0 0 5px 20px;
margin: 0;
line-height: 20px;
}

.headerleft {
width: 480px;
float: left;
font-size: 14px;
margin: 0;
padding: 0;
}

.headerleft a img {
border: none;
margin: 0;
padding: 0;
}

.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;
}
.headerright a img {
border: 1px solid #FFF;
margin: 0 0 3px;
padding: 0;
}
#header .description {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin-left: 25px;
padding: 0;
}


Kemudian kita juga akan menambahkan Nav bar dibawah header dengan menambahkan kode dibawah ini :


/*navigasi
-----------------------------*/


#NavbarMenu {
background: #bd027d;
width: 980px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px;
padding: 0px;
}

}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0px;
padding: 0px;
}

#NavbarMenuright {
width: 300px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 0px 0px 0px;

}
#nav {
margin: 0px;
padding: 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #f9ea01;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0px;
padding: 9px 15px 8px 15px;
}

#nav li a:hover, #nav li a:active {
background: #EBE6D4 url(images/navhov.png);
color: #495D5C;
margin: 0px;
padding: 9px 15px 8px 15px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E1DCCA;
width: 150px;
color: #495D5C;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #85ACAC;
color: #FFFFFF;
padding: 7px 10px 7px 10px;
}

#nav li {
float: left;
padding: 0px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#nav li li {
}

#nav li ul a {
width: 140px;
}

#nav li ul a:hover, #nav li ul a:active {
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE !important;
width: 220px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}
#searchbutton {
background: #fc06b9;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#subscribe {
margin: 0;
padding: 5px 0 0;
overflow: hidden;
}
#subbox {
background: #EEE !important;
width: 200px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subbutton {
background: #f9099c;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 7px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#name, #email, #url {
background: #EEE !important;
width: 250px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#submit {
background: #000000;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#words {
background: #EEE;
width: 460px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subnavbar {
background: #666666;
width: 980px;
height: 24px;
color: #FFFFFF;
margin: 0px 0px 2px 0px;
padding: 0px;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li a:hover, #subnav li a:active {
background: #85ACAC;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666666;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #85ACAC;
margin: 0px;
padding: 6px 10px 6px 10px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}


Langkah selanjutnya adalah merubah susunan kode pada body :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
</div>

dengan kode dibawah ini :

<div id='header'>

<div class='headerleft'>
&lt;img src=&quot;http://i288.photobucket.com/albums/ll179/ahnning/header-CA-animasi.gif&quot; border=&quot;0&quot; alt=&quot;Photobucket&quot;&gt;
</div>

<div class='headerright'>

&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client = &quot;pub-7181952237540333&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x60, created 6/18/08 */
google_ad_slot = &quot;5864627181&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;

</div>

</div>


Headerleft pada magazine blogger "Edel2xMinima" merupakan background Animasi yang kita buat dengan Adobe Photoshop dan diupload di Photobucket dengan ukuran 475px X 100px (GIF). (akan dibahas selanjutnya bagaimana membuat Animasi header).

Headerrightnya merupakan kode Adsense dengan ukuran 468px X 60px


KODE TAMBAHAN NAVBAR DIBAWAH HEADER :

Selanjutnya kita tambahkan kode dibawah ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='url anda'>Categori, misalnya Tutorial</a>
<ul>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
</ul>
</li>
<li><a href='#'>item Post lainnya</a></li>
</ul>
</div>

<div id='NavbarMenuright'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this website...&quot;;}' onfocus='if (this.value == &quot;Search this website...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

</div>
</div>

<div style='clear:both;'/>

<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Community Events</a>
<ul>
<li>
<a href='#'>Sub Category #1</a>
<ul>
<li>
<a href='#'>Sub Sub Category #1</a>
</li>
<li>
<a href='#'>Sub Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>item anda</a>
</li>
<li>
<a href='#'>item Anda</a>
</li>
</ul>
</div>

<div style='clear:both;'/>

Pemasangan kode diatas, dibawah kode header diatas dan diatas kode :

<div id='content-wrapper'>

Silahkan dimodifikasi sendiri, dan jangan putus asa.

Mil-Spec Circuit Breakers

Development of the electronics world at this time increasingly sophisticated demands of experts in designing the product quality. Especially in the field of culture in military electronic systems.

Engineers who designed military vehicles and equipment to face the challenges, Circuit Breakers must design the right to protect the device in the computer that ensure reliable performance in mission-critical situation in their military operations.

Unfortunately, many experts assume that the circuit breaker will be ideal to provide protection if meet military specifications, but without the presence or Mil-Spec Circuit Breakers is not the most important election. In fact, designers have to ignore or even exceed Mil-Spec Circuit Breakers in many circuit-protection applications.

More than fifty active military specifications and hundreds of private industry specification applies to Circuit Breakers. However, the understanding of the basic characteristics of Circuit Breakers and a large operation to help designers select the circuit breaker in the most appropriate for their application.

Choosing the correct circuit breaker technology is very important for each application. There are four types of circuit breaker technology to choose from:

* Thermal;
* Thermal-magnetic;
* Magnetic, and
* High-performance.

If you need a military Circuit Breakers, the equipment must comply with all requirements mil-spec. Such as remote control Circuit Breakers (RCCB), which functions as a combination of relay and circuit breaker also considered, this device functions as the control circuits and high power control signal to the cockpit. The relay circuit breaker combination that should remove the power cord, and so will increase efficiency and reduce the weight of the entire system, and the number of components.

Mil-spec Circuit Breakers are available with a wide range of flexible and fully functional features, you can find on the internet.

Need for Web Hosting Tutorials

The need for the Internet at this time is a factor of supporting a business online. When we create a website or blog for business, of course we need a Web Hosting plan we can support it. Setting up a web site hosting account to host your business Web site can be confusing.

We need a Web Hosting Tutorials to help understand the process and guides us through the steps to set up web hosting.

Web Hosting Tutorial covers all the basics of web hosting, how to choose a web host, domain names, and more. Much-needed general information page on the website hosting articles for beginners, to start learning about web hosting, To be able to obtain a better understanding, to learn about how the process of getting a web page or a web site full of computers that have been used for the web server, and the process domain name selection is good, the steps to register domain names and domain names that point to Web sites.

Several articles in the Web Hosting article as a comparison, in order to gain more information can be searched on the internet, so this could increase confidence in our ability to create the site.

As part of NaviSite marketing and product management team, we have some thoughts about the web hosting for the year 2009. Believe that conventional hosting sector will experience a dramatic transformation in 2009. Currently, economic conditions will place small businesses in danger as they struggle to keep pace in this highly competitive and market demand, business will come to realize the importance of relationships and find solutions that are more qualified. For that, we need the web hosting server that has a fast.

Thus, we can not be wrong in making a decision in choosing the Web Hosting services.

Prosedur Modifikasi MINIMA (II)

MENAMBAH TOPNAVBAR

Prosedure Modifikasi Minima bagian kedua kali ini merupakan lanjutan Prosedure modifikasi Minima bagian pertama yang membahas tentang bagaimana memodifikasi template minima menjadi "Edel2XMinima", kali ini kita akan membahas bagaimana menambahkan TopNavbar, yaitu ruang navigasi diatas Header.

Untuk meodifikasi ini, kita perlu menyembunyikan Navbar Blogger terlebih dahulu, pasang kode

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

setelah kode berikut :

/* Use this with templates/template-twocol.html */


kemudian kita tambahkan kode berikut, diatas kode : ]]></b:skin>


/*topnavbar
------------------------*/
#topnavbar {
background: #2c4755;
width: 980px;
height: 30px;
color: #FFFFFF;
margin: 0px 0px 2px 0px;
padding: 0px;
}

#topnavbar a, #topnavbar a:visited {
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

#topnavbar a:hover {
text-decoration: underline;
}

#topnavbar p {
font-size: 11px;
font-weight: bold;
padding: 0px;
margin: 0px;
}

.topnavbarleft {
width: 250px;
float: left;
margin: 0px;
padding: 8px 0px 0px 10px;
}

.topnavbarright {
width: 600px;
float: right;
margin: 0px;
padding: 7px 10px 0px 0px;
text-transform: uppercase;
text-align: right;
}

.topnavbarright a img {
border: none;
margin: 0px 3px 3px 0px;
padding: 0px;
}


pada body kita tambahkan : topnavbar yang isinya realtime, post feed & comment feed dari blog kita.

rubah <body> dengan <body onLoad='goforit()'> lalu tambahkan kode real time dibawah ini :


&lt;script&gt;

var dayarray=new Array(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;)
var montharray=new Array(&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;)
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year &lt; 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym&lt;10)
daym=&quot;0&quot;+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn=&quot;AM&quot;
if (hours&gt;=12)
dn=&quot;PM&quot;
if (hours&gt;12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes&lt;=9)
minutes=&quot;0&quot;+minutes
if (seconds&lt;=9)
seconds=&quot;0&quot;+seconds
//change font size here
var cdate=&quot;&lt;small&gt;&lt;font color=&#39;000000&#39; face=&#39;Arial&#39;&gt;&lt;b&gt;&quot;+dayarray[day]+&quot;, &quot;+montharray[month]+&quot; &quot;+daym+&quot;, &quot;+year+&quot; &quot;+hours+&quot;:&quot;+minutes+&quot;:&quot;+seconds+&quot; &quot;+dn
+&quot;&lt;/b&gt;&lt;/font&gt;&lt;/small&gt;&quot;
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById(&quot;clock&quot;).innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&amp;&amp;!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval(&quot;getthedate()&quot;,1000)
}

&lt;/script&gt;

kemudian cari kode <div id='header-wrapper'> lalu tambahkan kode dibawah ini di atas kode tersebut


<div id='topnavbar'>

<div class='topnavbarleft'>
<span id='clock'/>
</div>

<div class='topnavbarright'>

<p><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a>

<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'><img alt='' src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle;margin-left:10px;'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></p>

</div>
</div>

(Bersambung.... )

About MAILING LISTS

Mortgage mailing list and Marketing List are a key ingredient in a successful marketing campaign. When you put together the marketing campaign, you need a mailing list that provides information accurate, up-to-date information and Quick.

The team of marketing experts from the mailing list will identify the most likely to yield the maximum response to marketing campaigns.

Because many mailing-list with all categories, as Media group to promote the goods sold or bought the company, then created Marketing List and Mailing Leads in the company. this way the company can quickly and easily provide information about a product, and would also cost-effective

Group of experts in the field must have the experience, knowledge and expertise that can help you improve the response rates on marketing projects. Must be able to build a solid relationship in the broker industry, which means it can provide with the best possible price and highest deliverability rates in the mailing list.

In the midst of a smart consumer and tight competition, the group of experts will help you find, acquire, and retain customers.

American Heritage Data Corporation provides quality mailing lists, also can target your ideal customer with a cost effective mailing leads. If you have to qualify mortgage leads, here you will get the correct instructions

Prosedur Modifikasi MINIMA ( Bag. I )

Prosedur modifikasi template MINIMA yang hasilnya menjadi Magazine Blogger "Edel2XMinima" adalah sebagai berikut :

1. Buat blog baru pada blogger, kemudian pilih minima. Dalam proses awal jangan centang kotak Expand. Kemudian cobalah membuat dua postingan sekaligus untuk mengetahui kondisi kolom posting saat kita modifikasi.

2. Langkah awal dalam proses modifikasi adalah, terlebih dahulu fokus kita pada pembagian ruang Main-wrapper & Sidebar . Mengingat pada bagian ini merupakan sasaran yang saya inginkan, sedangkan untuk bagian header dan footer belakangan, setelah kita berhasil dalam membagi ruang antara kolom posting dan sidebar.


3. Kita rubah dulu ukuran Header/footer-nya , coba perhatikan kode asli header & footer MINIMA :

#header-wrapper {
width:660px;
dst...... hingga }

kode footer :

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
dst...... hingga }

Ganti width:660px; dengan width: 980px
(Selanjutnya akan kita bahas pada modifikasi header MINIMA)

4. Saatnya memodifikasi Outer dan Main-wrapper, Cari kode dibawah ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Ganti width : 660px; menjadi width: 980px;


5. Dibawah kode diatas terdapat kode berikut :

#main-wrapper {
width: 410px; ( ganti ukurannya menjadi 640px)
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;( ganti ukurannya menjadi 310px)
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sisa 30px digunakan untuk ukuran Margin & Padding ( selanjutnya disebut M & P )


6. Sekarang kita akan membagi dan memodifikasi kolom Main-wrapper.

#main-wrapper {
width: 640px;
border-right:3px solid $bordercolor; ( ini adalah kode tambahan pembatas kanan, ketebalan 3px bisa anda rubah sesuai kemauan )
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode berikut :

#main-left {
width: 640px;
float: left;
margin: 4px 4px 0px 0px;
padding: 0px;
color: #000000;
background: $bgcolor;
border-right:.5px dotted $bordercolor; ( dotted = titik-titik, bisa anda rubah SOLID agar nampak utuh garisnya )
}

#main-left .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em;
}

#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$bgcolor;
width:220px; ( ini adalah lebar kolom kanan )
line-height:1.2em
}

#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;
}

#main-right img{margin-bottom:4px;border:1px solid #000000}

#main-right .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em; }

7. Cari kode :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Hapus .main .widget


8. Kemudian cari kode : ]]></b:skin> dan tambahkan kode berikut dibawah kode tersebut.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-left {
width:400px;
}
.post-body img{
width:390px;
}
</b:if>
</style>

Kode ini untuk menampilkan kolom kiri pada ruang Main-Wrapper, ukuran 400px berasal dari 640 - 220 - 20 (M+P).


9. Langkah selanjutnya menuju pada bagian <body>, cari kode dibawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Perhatikan susunan setelah modifikasi :

<div id='main-wrapper'>

<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/> ( jangan lupa memberi tanda "/" agar tidak error )
</b:if>
</div>

kode berwarna merah adalah kode modifikasi

Susunan Kode setelah dimodifikasi adalah sebagai berikut :

<div id='main-wrapper'>

<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Selanjutnya kita preview, apabila masih tidak teratur cobalah rubah ukuran M & P-nya. Bila sudah berhasil silahkan save


to bo continued bin bersambung..............

Magazine Minima Blogger

Satu lagi design Magazine Blogger yang merupakan kelanjutan dari tulisan sebelumnya lahir dengan nama "Edel2XMINIMA". Setelah membaca komentar dari "GADIS RANTAU" tentang kesulitan menerapkan tip membuat MAIN-Wrapper menjadi dua kolom, maka saya mencoba memodifikasi minima dari dua kolom menjadi beberapa kolom antara lain Top Header, dua kolom header, Feature bagian atas, sidebar, Main-Left, Main-Right, 2 kolom extra dibawah Main dan satu kolom Feature pada bagian bawah yang nantinya bisa dibuat "fcats" ( gambar sebelah kiri, artikel sebalah kanan ).

Pada bagian Header saya bagi dua kolom, sebelah kanan saya menyisipkan Header animasi dengan sentuhan Adobe Photoshop CS4 ( yang saya dapat dari sistem CSS (Colong Sana Sini) juga) sedangkan sebelah kiri untuk pasang Adsense ( ukuran sudah saya sesuaikan dari pesanan eyang Google ).

Pada bagian TOP kiri saya pasang Realtime sedangkan bagian kanan Feed Post dan Comments. Pada bagian bawah header terpasang Navigasi horizontal berikut sub-subnya demikian juga dengan Search Box bertengger diujung kanan. Dibawah ini tampak bagian Home Pagenya.


Sedangkan untuk bagian subpagenya nampak seperti gambar berikut :


Pada bagian footer sengaja tidak saya tambah..... capek dech!!!!

Rasanya saya tidak sabar untuk membagikan template ini kepada komunitas Blogger, namun si Ziddu nampaknya tidak bersahabat dengan saya ( Loadingnya lama, ndak betah nunggu si bCOM ).

Melalui posting kali ini, saya mohon petunjuk tentang bagaimana membuat link download secara langsung. Maksudnya, saat icon download diklik, maka file langsung terdownload.

Harapan saya, semoga masih ada rekan blogger yang sudi menularkan pengetahuannya kepada saya. Maklum saya hanyalah blogger ndeso.... jadi selalu ingin dicekoki agar ndak "Ngah-ngoh bin telmi "

Demo LIVE

Blue magazine blogger template

Judul di atas merupakan finishing dari meodifikasi "Edel2Xtemplate", yang sekarang template tersebut digunakan "Sharing Post".

Template ini termodifikasi berkat rasa penasaran yang sangat kuat di hati saya saat melihat model template Magazine Blogger yang dijual dengan harga $ 50 s/d $ 85. Coba anda lihat di model situs tersebut di sini.

Semula saya mengejar turorial dari Kang Jaloee, namun nampaknya masih ada teka-teki besar yang perlu saya pecahkan. Karena info dari beliau kita harus download dulu template Cellar Heat kemudian mengganti beberapa kode pada template yang akan kita modifikasi. Padahal saya ingin murni dari template yang ada, misal MINIMA yang merupakan sasaran empuk untuk di EDEL2X.

Langkah yang aku gunakan adalah melihat kode sumber dari template "Allsporting" di atas, kemudian aku copas dalam MSword. Kalau kita melihat dari susunan template gratis dengan template "Premium" jelas berbeda. Susunan HTML pada template ini tidak dikelompokkan per bagian misal untuk Main-Wrapper sendiri, Sidebar juga sendiri dan seterusnya. Justru dalam kode sumber template ini, pengelompokkan didasarkan berdasarkan pengaturan ukuran Padding, Margin, Color dst....

Selama dua hari saya mreteli satu persatu dan aku selundupkan di MINIMA yang ada. Setelah berduel dengan ERROR, justru akhirnya saya menemukan cara bagaimana membagi Kolom Main ( tempat Posting ) menjadi 2 atau 3, tergantung selera kita.

Berikut langkah-langkah yang aku kerjakan :

Sebaiknya praktekkan di MINIMA dulu ( Namun saya menerapkan pada template yang sudah saya modifikasi sebelumnya ), masuk pada edit HTML kemudian buat susunan kode seperti ini ( Ingat jangan centang kotak Expand ):


/* ----- MAIN ----- */

#content-wrapper {
width: 998px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 654px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode berikut :

#main-left {
width: 654px;
float: left;
margin: 4px 4px 4px 0px;
padding: 0px;
color: $textColor;
font: $textFont;
background: $postbgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$postbgColor;
width:260px;
line-height:1.2em}

#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal 148% Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;border-bottom:1px solid #000000}
#main-right img{margin-bottom:4px;border:1px solid #000000}


#main-left .widget{
margin: 0px 5px 5px 5px;
padding: 0px 10px 10px 4px;
}

#main-right .widget {
margin: 0px 0px 5px 0px;
padding: 10px 10px 10px 10px;
}

Langkah selanjutnya adalah tambahkan kode dibawah ini di atas kode </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

#main-left {
width:376px;
}
.post-body img{
width:350px;
}
</b:if>
</style>

Kemudian pada bagian body, buat susunan dibagian <div id='content-wrapper'>

<div id='main-wrapper'>, dengan susuna seperti ini:

<div id='content-wrapper'>

<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
</div>

Sebelum anda menyimpan template, coba preview dulu apa sudah berhasil atau belum.
Setelah berhasil baru di save.

Fungsi dari kode <b:if cond='data:blog.pageType != &quot;item&quot;'> adalah untuk menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.

SIlahkan anda rubah ukuran Margin, Padding, Color, font sesuai dengan kondisi template anda. Meskipun hasilnya tidak sebagus template yang aku "Intip" namun teka-teki selama ini terjawab sudah, dan ini sebagai modal saya untuk edel2x template selanjutnya.

Saya bisa, pasti anda bisa... yang penting semangat.

Benefits of entrepreneurship

In response to economic development at this time, ability and stamina required in responding to these developments. This capability would be expected to support or at least able to change the pattern of someone living in the meet the needs of their claims. They must think how to create employment or at least get a job in the plans to continue his life. To support all that, we are required to understand about entrepreneurship.

Entrepreneurship is the way that need to be done in identifying opportunities, creating many job opportunities. Entrepreneurship is often difficult, young entrepreneurship often fail when they do not have a strong foundation related to the education and business capital.

A person who is willing and able to convert an idea or invention into a successful innovation. Entrepreneurship forces "creative destruction" in the market and industry, as well as create new products and business models. In this way, the damage is responsible for the creative dynamics of the industry and in the long-term economic growth.

Entrepreneurship is about taking risks. Reflects the behavior of the kind of person who is willing to put his career and financial security and take the risk on the idea, spent much time and capital on a certain business.

Entrepreneurship is widely regarded as important players in the business, particularly as the engine for job creation and economic growth. Young entrepreneurs have claimed many characters, has an enthusiastic vision, with persistence and determination, then the employers develop strategies to change the vision into reality. One needs the inspiration, motivation and fine.

Every successful businessman will bring benefits not only for himself but for the city, region or country as a whole. Benefits that can be taken from entrepreneurial activities are as follows:

• Benefits of personal finance
• Self-employment, offer a more satisfactory work and the flexibility of the labor force
• Further development of the industry, especially in rural areas or regions disadvantaged by economic change, for example, because the effects of globalization
• Processing materials into local goods so for domestic consumption and for export
• Income and increase economic growth
• Competition is healthy so that encourage high-quality products
• More goods and services available
• Development of new markets
• Promotion of modern technology in small-scale manufacturing is higher to increase productivity
• Freedom from dependence on the work offered by other people

Entrepreneurship given the potential to support economic growth and social, it is the goal of various government policies to develop a culture of entrepreneurial thinking. This can be done with a variety of ways: by integrating entrepreneurship into the education system, legislating to encourage risk taking, and the national campaign.

This phenomenon is by Kauffman.org, working to better understand the phenomenon of entrepreneurship, the level of education and entrepreneurship training to promote entrepreneurial business-friendly policies, and to facilitate the commercialization of new technologies by entrepreneurs and others, which is very promising to improve the economic welfare of the nation.

"Edel2Xtemplate" Magazine Blogger

Sambil menunggu perkembangan berita dari Kang Jaloee, saya mencoba memodifikasi template dari "Profeesional Template" dari Our Blooger Template. Maklum dari situs ini saya banyak belajar cara memporakporandakan sebuah template yang sudah bagus menjadi tambah... ndak karuan alias hancur.

Dengan Bantuan Adobe Phoshope CS3, saya mencoba memberikan sentuhan agar nampak tidak monoton. Pada bagian Header saya bagi menjadi dua ruang, satu untuk image dan yang satu untuk pesanan eyang GOOGLE. Dengan ilmu CSS ( Contek Sana Sini ) seadanya, akhirnya saya sudah selesaikan baru 75 %, karena yang 25 % nunggu teori yang dijanjikan oleh Suhu JALOOE untuk dipraktek di template ini. Dengan teori yang saya dapatkan di dynamicdrive.com dan dari beberapa sumber yang sering saya "INTIP" kode sumber halaman templatenya, rencananya akan saya kembangkan hingga final dan hasilnya akan saya sebar ke pelosok penjuru...he..he..he.. sombong kali

Dibawah ini adalah mondel bagian atas template yang saya beri nama "Edel2Xtemplate".


Dan pada bagian footer saya menambahkan 5 kolom dan Linkbar , dibawah ini adalah tampilan bagian footer.


Untuk itu mohon kiranya dari rekan-rekan untuk menyumbangkan ilmunya guna menuntun saya dalam menyelesaikan karya "INTIP" ini, terutama dari yang punya " Yang bertanya, Yang menjawab ".

Berikut sekedar untuk dinilai dan dikoreksi "DEMO DRAFT"-nya

gAjax RSS Pausing Scroller

Judul aneh diatas saya temukan di situs www.dynamicdrive.com, yang maksudnya untuk menampilkan cssfeed dari beberapa media yang online. Di situs ini anda akan disuguhi tiga demo sekaligus, yang mana masing-masing demo berisikan rssfeed dari Yahoo News, BBC dan MSNBC. Sedangkan untuk di Indonesia mungkin anda bisa mendapatkan di Republika Online ( info ini saya dapat setelah ngintip kode sumber halaman dari blognya kang Jalooe.... untuk kang Jalooe, sorry ya.... semua saya lakukan demi komunitas Blogger ).

Namun sebelum kita memasang gAjax RSS Pausing Scroller (hosted) ini, kita harus mempunyai "Google AJAX Feed API key", mengingat kode ini harus terpasang nantinya dibagian head. Disini saya akan menjelaskan sesuai pengalaman yang sudah saya lakukan.

Silahkan anda Sign Up untuk mendapatkan "Google AJAX Feed API Key".
Perhatikan gambar dibawah ini, dan kerjakan sesuai gambar :


Setelah menekan "Generate API Key", kita akan dihadapkan pada halaman yang mencatumkan kode "Google AJAX Feed API key" dari URL blog yang kita daftarkan, berikut dengan contoh pemasangan kode tersebut. Coba perhatikan gambar dibawah ini :


Silahkan Copy paste kode yang saya kotak merah pada notepad.

Dalam situs www.dynamicdrive.com kita diminta untuk mendowload "gajaxscroller.js" dan "gfeedfetcher.js" kemudian silahkan upload di situs dimana kita menyimpan file secara online.
Namun bila anda malas mengerjakannya, disini sudah saya siapkan url dari kedua file JS tersebut.

Setelah kita masuk Blogger, backup dulu template anda dan jangan mencentang "Expand Template Widget"

Masukkan kode berikut di atas kode </head>( Disini ada tiga pilihan demo,Pilih salah satu sesuai selera. Sengaja saya cantumkan semua agar bisa dipilih ) :

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gfeedfetcher.js"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/ width: 450px; height: 30px; border: 1px solid black; padding: 4px; background-color: lightyellow; }

#example2{ /*Demo 2 main container*/ width: 600px; height: 180px; border: 1px dashed black; padding: 4px; background-color: #EEEEEE; } #example2 div ul{ /*Demo 2 UL container*/ margin: 0; padding-left: 18px; } #example2 div ul li{ /*Demo 2 LI that surrounds each entry*/ margin-bottom: 4px; }

#example3{ /*Demo 3 main container*/ width: 250px; height: 280px; border: 1px solid navy; padding: 4px; } #example3 div p{ /*Demo 3 P element that separates each entry*/ margin-top: 0; margin-bottom: 7px; }
code{ /*CSS for insructions*/
color: red;
}

</style>


Selanjutnya tinggal menempatkan kode HTML dalam bagian body, berdasarkan pengalaman saya memilih demo3 yang saya letakkan di sidebar melalui tambah elemen "HTML/Javacript"

Ini adalah kode Example/ demo - 1 :

<script type="text/javascript"> var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new") cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script>


Example 2:

<script type="text/javascript"> var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "") socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed socialfeed.displayoptions("label datetime") //show the specified additional fields socialfeed.setentrycontainer("li") //Display each entry as a DIV socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label socialfeed.entries_per_page(5) socialfeed.init() //Always call this last </script>


Example 3:

<script type="text/javascript"> var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new") newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.entries_per_page(2) newsfeed.init() //Always call this last </script>

Perhatikan dari masing-masing kode HTML yang tercetak tebal adalah letak penempatan dari Feed yang kita pasang.

Dan dibawah ini adalah contoh pemasangan feed untuk Republika On line, yang ditempatkan langsung pada saat Edit HTML pada bagian <body> .

<p><script type='text/javascript'>

var cssfeed=new gfeedrssticker("example10", "example10class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://feedproxy.google.com/republika") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script></p>

Silahkan and bereksperimen dengan masing-masing demo, dan atur ukuran width dan heightnya disesuaikan kondisi ruang body template anda. Ingat !!! salah satu demo yang dipasang pada template kita.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

teks berwarna merah diatas adalah tempat kode "Google AJAX Feed API key", ganti kodenya dengan milik anda.

Untuk melihat demonya, kunjungi situs di atas atau anda dapat melihat hasilnya di situs Kang Jaloe untuk demo 1 dan disini pada sidebar untuk demo 3.

Semoga bermanfaat

Kanibal Template Blogger

Pada minggu kemarin saya mencoba memodifikasi template Minima yang ada dengan menggunakan sistem campur aduk tutorial yang saya dapatkan dari beberapa sumber, termasuk di dalamnya menggunakan sistem CSS ( Contak Sana Sini ) dari beberapa Website berbasis wordpress.

Dari kode sumber halaman website tersebut, saya copas ke notepad. Lalu saya pelajari kode CSS & javascript yang ada bersama eyang google. Meski sudah menghabiskan weekend dan 3 pack "123" akhirnya hasilnya sangat memuaskan bagi saya, namun saya tidak tahu apa sangat jelek bagi rekan-rekan blogger.

Saya menyebutnya sebagai "KANIBAL TEMPLATE MAGAZINE BLOGGER", sebab mulai dasar template hingga Javascript yang terpasang merupakan hasil copas dari beberapa sumber. Dengan menggunakan kemampuan CSS ( Contek Sana Sini ),ASP (Asal Sedot Pakai praktek ) dan PHP (Pakai Hancur Pugar lagi ) akhirnya jadi juga template kanibal ini.

Dan template ini merupakan draft blog yang saya gunakan untuk satuan dimana saya "Nebeng" makan dan ngasih belanja mbok dhewor.

Yang perlu saya garis bawahi adalah, bagaimana cara menambahkan kolom-kolom dibawah Main-wrapper ( tempat posting ) yang ukurannya sama besar. Berikut bentuk kolom-kolom yang saya tambahkan :


Kalau anda berkenan untuk sharing mari kita bahas cara membuatnya :

Langkah awal tentunya backup dulu template anda, tapi saya sarankan untuk praktek ini buatlah blog baru saja.... seperti apa yang saya kerjakan dalam memodifikasi template.

1. Masuk ke blogger lalu tambahkan CSS ini sebelum kode ]]></b:skin>

/* ----- fblock ----- */
.fblock1 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1 h2 a:link, .fblock1 h2 a:visited{
color:#fff;
}
.fblock1 {
width: 305px;
float:left;
margin: 0px 0px 0px 5px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1:hover {
width: 305px;
float:left;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock1 p{
margin:5px 5px;
color:#fb7305;
}
.fblock1 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
#fblock1 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background: #ffffff;
border: 1px solid #e6e6e6;
}

.fblock2 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2 h2 a:link, .fblock2 h2 a:visited{
color:#fff;
}
.fblock2 {
width: 302px;
float:right;
margin: 0px 4px 5px 0px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2:hover {
width: 302;
float:right;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock2 p{
margin:5px 5px;
color:#fb7305;
}
.fblock2 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
.fcats{
overflow:hidden;
font-size:11px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:1px 0 0px 0;
height:15px;
}
.fcats a:link,.fcats a:visited {
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
height:13px;
}
.auth{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta a:link,.fmeta a:visited{
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}


2. Selanjutnya kita pasang kode dibawah ini pada bagian bawah Main-wrapper dibawah: </b:section>

<div class='fblock1'>
<b:section class='content1' id='content1' showaddelement='yes'/>
</div>

<div class='fblock2'>
<b:section class='content2' id='content2' showaddelement='yes'/>
</div>

Kemudian simpan template anda.

3. Langkah selanjutnya adalah masuk pada " Tambahkan elemen halaman " pada bagian HTML/ Javascript, lalu tambahkan kode berikut :

<img src='YOUR-IMAGE-LINK' width='100' height='60' alt=''/>

<div class='fcats'><a href='YOUR-CATEGORY-LINK' title='YOUR-CATEGORY-TITLE' rel='category'>YOUR-CATEGORY-TITLE-HERE</a></div>

<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE-HERE'>YOUR-POST-TITLE</a></h2>

<div class='auth'> Posted by Author </div>
<div class='fmeta'> POST-DATE |
<a href='YOUR-POST-LINK' title='Comment on YOUR-POST-TITLE'>ADD COMMENTS</a>
</div>

4. Langkah ke empat silahkan anda berpusing ria dalam mengatur width dan height di masing-masing tambahan kode di atas.

Pada modifikasi kali ini beberapa bagian saya hilangkan dengan menambahkan kode :

visibility: hidden;
display: none;

Juga saya menambahkan kode tabpage agar tampilan menjadi "ciamik".

Untuk melihat demo dari hasil template kanibal ini, silahkan klik DEMO

Komentar anda bersifat membangun... sangat 10000 x saya hargai

Active Directory Tools

I was a computer operator in the military, precisely in the operations staff marine Brigif 1. Of course, I demanded to learn about, or at least understand the Active Directory associated with the Microsoft Windows Server.

The requirement to learn a lot about it to the success of the task given by the leaders to me. Particularly related to issues that include the administration of making plans, reports and other activities.

I should be prosecuted because of a professional, so I try to learn IT development at this time through the Internet.

I realize the importance for the Active Directory (AD) which is a central point for an organization's software infrastructure. So, I can easily learn about various AD objects, help me to plan for maintenance processes and procedures.

I get information about Ensim.com, where its products are used by service providers and enterprises worldwide to accelerate and Deployment solution that enables integrated, automated and simplify the management of complex security environment, and improve user productivity and IT

Here, I can get information about Active Directory Tools and Exchange Tools. In this website, I can find a variety of IT solutions. I take the example of their products Enterprise solution, you can get a complete solution to the integrity of Microsoft Active Directory, Exchange and Blackberry Mobile.

So, this appears to create a more efficient workflow. This can be achieved with the Active Directory and Exchange Management

So, do not have one when I provide this information so that you and I can work more effective and efficient service by using the Ensim.

Magazine Blogger Template

Berangkat dari blog kang Jaloe yang sering berubah-rubah, akhirnya ketularan juga saya jadinya. Emang suhu satu ini merupakan sumber inspirasi dan sumber referensi dalam mempelajari CSS (baca:Contek Sana Sini)

Sebenarnya sudah lama saya ingin mempunyai blog berbentuk majalah, makanya saya berusaha mencoba mengintip kode dari beberapa website berbentuk majalah.

Kebetulan saya sering mampir di blognya Kang Jaloe, jadi dari blognya saya mendapatkan sumber refferensi yang dapat saya pelajari.

Kali ini saya mencoba memodifikasi template minima dan sebenarnya bentuknya tidak jauh berbeda dari milik kang Jaloe, karena pada bagian Headernya terus terang saya nyontek bin ngerpek. Tentu anda tahu kan, kalau kita melihat template bagus.. trus dari tool "tampilan" kita bisa melihat "Kode Sumber Halaman", ya dari situ saya mencoba belajar.
Namun hasilnya tidak maksimal dan tidak sebagus milik suhu..he..he.., tapi lumayanlah buat tambahan perbendaharaan template bagi komunitas blogger.

Berikut Replika template tersebut :




Kalau ada yang berkenan silahkan download di sini

Untuk melihat demonya di blogku yang satu ini.

Untuk pertanyaan silahkan masukkan komentar anda, saya akan berusaha untuk menjawab dan kalau ndak bisa saya akan tanyakan ke suhu Jaloe...he..he..he..he...

Satu lagi, untuk real time aku nyontek milik sobat Guruh Subagya, jadi kalau kurang jelas tanya saja langsung ke beliau..... (he..he.. si bC lari dari tanggung jawab nih )

Jadi bila anda berkenan menggunakan template ini, ada tiga orang yang bisa dijadikan tempat ngomel....he..he..he..