Posting Tanpa Judul
Saya pun bingung, posting ini ada gak ada judul ny,posting ini merupakan draft dulunya sebagai percobaan... Akhirnya diterbitkan saja biar ntar ada kasi judul yang tepat.<div style="border-bottom: 1px dotted #ffffff; padding: 2px; text-align: center;">Posting Tanpa Judul</div>
Untuk para sobat blogger yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat bisa merubah halaman template. Lansung saja cara nya:
Outer-wrapper: Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah
Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
overflow: hidden;
Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :
#wrapper{
width:1000px;
margin:0px auto 50px;
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:
Main-wrapper:500px
Sidebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sidebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper
#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#footer-wrapper {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
[[..selengkapnya..]]
Outer-wrapper: Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah
Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
overflow: hidden;
Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :
#wrapper{
width:1000px;
margin:0px auto 50px;
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:
Main-wrapper:500px
Sidebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sidebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper
#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#footer-wrapper {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
Perhatikan, kata "wrapper" adalah intinya, mungkon tiap Template blog berbeda-beda. Yang perlu di rubah teks yang berwana hijau. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save. Selamat mencoba...!!!
1. Buka template -> Edit HTML -> Kasih tanda centang pada menu "Expand Template Widget"
2. Cari kode dibawah ini:
</head>
Letakkan kode berikut persis di atas kode diatas:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Cari kode dibawah ini:
<p><data:post.body/></p>
Letakkan kode berikut di bawah kode diatas:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
4. Klik Simpan. Selesai.
Anda bisa mengganti kata "Read More" diatas dengan gambar icon serbagai gantinya, cara nya hapus kata "Read More" ganti dengan kode:
<img src="URL_ICON_ANDA" />
Download Small_Read_More_Buttons.zip
Download Large_Read_More_Buttons.zip
Sampai disini proses pemasangan kode "Read More" selesai. Supaya tampil anda harus memasukkan kode dibawah ini dalam postingan anda.
<span class="fullpost">
.....posting yang ingin disembunyikan......
</span>
.....posting yang ingin disembunyikan......
</span>
Happy Blogging....
Beberapa blog dan halaman Web ada yang halaman nya panjang ke bawah, di sanalah widget ini akan menolong. Seperti yang pernah anda lihat, ada tombol panah kecil di bagian-bagian kanan bawah halaman ini. Selalu mempertahankan posisi yang sama.
Manfaat dari tombol Back toTop ini:
- Menghemat waktu pengunjung Blog anda untuk ke atas.
- Tombol tidak mengganggu dengan konten Anda.
- Anda dapat menggunakan icon gambar kesukaan anda sendiri untuk blog anda.
Kode Html:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY_491RgxCvFDTr9GxLWM7kmrq41kAfa_0VnFs_bFmwUwCMww05g6Qe_wfE3EEk9y1eXozSmXTNnOHVdpAyh03hmHFjbOStDX0gZlwA8X8lQctX1VgIXba_L1uGwgpwSxApX6Qx7Z1pTg-/" /></a>
SyntaxHighlighter buatan Alex Ghorbatchev ini sangat cantik dan manis seperti artis yang berpakaian minimalis.SyntaxHighlighter adalah salah satu strategi untuk meningkatkan keterbacaan dan konteks dari teks, terutama untuk kode yang mencakup beberapa halaman. Pembaca dengan mudah dapat mengabaikan bagian besar komentar atau kode, tergantung pada apa yang diinginkan seseorang.Setting parameter pada versi ini lebih banyak dari pada versi sebelumnya sehingga SyntaxHighlighter semakin fleksibel, lengkap, cepat proses loadingnya dan lebih bagus tampilannya. SyntaxHighlighter cocok bagi mereka para blogger hack, programmer, webdesigner, yang ingin menampilkan source code-nya didalam artikel.
Dibawah ini langkah demi langkah integrasi dan konfigurasi SyntaxHighlighter untuk pengguna Blogger.
Langkah-langkah setting SyntaxHighlighter pada Blogger:Langkah 1
Dowload css, script dan komponen SyntaxHighlighter lainnya disini.
Langkah 2
Ekstrak file nya.
Langkah 3
Login ke webhosting anda dan upload file-file SyntaxHighlighter tadi. Jangan lupa copy shortcut URL file tersebut.
atau upload di http://sites.google.com/
Langkah 4
Login ke Blogger dengan Account anda, jangan account saya.
Langkah 5
Masuk ke tab "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan kode dibawah ini diatas kode pada Langkah 6, dan ganti URL sesuai dengan shortcut URL file SyntaxHighlighter yang sudah anda upload pada webhosting anda:
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shCore.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shAutoloader.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAppleScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAS3.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushBash.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushColdFusion.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCpp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCSharp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCss.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDelphi.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDiff.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushErlang.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushGroovy.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJavaFX.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJava.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPerl.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPhp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPlain.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPowerShell.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPython.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushRuby.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSass.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushScala.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSql.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushVb.js'/>
<link type='text/css' rel='stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shThemeEmacs.css'/>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan kode dibawah ini diatas kode pada lang 8:
Simpan Teamplate
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'URL/clipboard.swf';
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>
Cara memasang nya:
<pre class="brush: js;">
......kode yang ditampilkan.....
</pre>
......kode yang ditampilkan.....
</pre>
Perhatikan
<link type='text/css' rel='stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shCore.css'/>
kode yg bewarna diatas merupakan style css untuk bentuk-bentuk kotak SyntaxHighlighter, jd anda bisa ganti-ganti temanya.
<link type='text/css' rel='Stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shThemeEmacs.css'/>
Kode bewarna diatas merupakan style css hiasan warna pada kotak SyntaxHighlighter.
