Showing posts with label tips trik edit HTML. Show all posts
Showing posts with label tips trik edit HTML. Show all posts

Cara Memasang Share This Post

Posted by Unknown on Wednesday, August 25, 2010

Cara Memasang Share This Post. Banyak trik SEO yang dapat kita gunakan agar blog atau halaman blog kita menjadi populer dan diindeks oleh mesin pencari (search engine). Salah satu trik yang dengan dengan mudah dapat kita lakukan adalah dengan cara memasang Share This Post pada halaman atau postingan blog milik kita.

Dengan memasang tool tersebut adalah halaman atau postingan kita dipublikasikan pada situs social bookmark yang dipilih oleh pengunjung, antara lain Digg, Delicious, Facebook, Google, Stumble, Technorati dan Twitter. Dengan terpublikasinya halaman postingan blog kita maka diharapkan akan dapat meningkatkan traffic pengunjung pada blog kita.

Jika pengunjung tertarik untuk memasang tool tersebut, Tips dan Trik Blog akan mengetengahkan cara untuk memasangnya.

Berikut langkah-langkah memasang Share This Post tersebut.

Pertama, login ke akun blogger masing-masing hingga masuk Dasbor >> Rancangan >> Edit HTML

Kedua, jangan lupa centangi “Expand Templates Widget

Ketiga, cari kode ]]>></b:skin>

Keempat, copy script di bawah ini di atas kode ]]>></b:skin> tersebut.

div.sociable { margin: 16px 0;}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}



Kelima, kemudian cari kode <data:post.body/>

Jika blog kita sudah menggunakan fungsi readmore maka akan terdapat dua kode tersebut dan pilih kode yang kedua atau terakhir agar tidak tampak pada halaman utama.

Keenam, copy script di bawah ini dan letakkan di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='sociable'>
<div class='sociable_tagline'>
<img alt='maspeypah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxWA8Zn4hS2iPLjro_DF8u8G5B0MZ9aS-Og5j3a776VYdYg_b4sg_uCb4uvpFwQCaIQoc_RUHoySOOgsG0k0J1CtP-WplhyphenhyphencBlRw4kA1vltXQX3ajug3eZAhTB2WVYmDfxNHkj-zBgERQ/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVrfjKSbai6KKRwl0i88JJJCisMLh2HKoCC4-CErpdTPh67WEwDiK9X72oC3SD9PpSamQsQc20QXsNTEnn-kpW7652DlRNmJMDbF10q1p-Uhw0GFwhEnrM0U8uOZtvMU7Yk50l_PGbXCY/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOdhhJbYBjFRoAdDAF50qytFoRLxG1k6aZdw7g6UrNx-RnvrqDQr35-f_UBKjg3k90-rY82aHwwjZBzG9hj5TyNTcnoRGL3q99yTXwFdEUH5GGHYKLgJqV998mpdpadhXS7W1ny94XTLCN/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0LG9KariXByLPfhKKsH4NucjP1rWWIio8BkvyB7LbkUdhxHXubDFH7_W16okBdfAtF_XZ6_8mDTUDUQSJroc-j5yr19i4dQDSmRlLgpTH15_tUmxH4BTp5KgoS5YpYXqaJBlZClB2f7S/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCrPxCDrVKdWX7Ct_NzxsxZp0EwyeGPirQ7HLyMrVW4IweRfe2HmQ0LFV5YOrirMj4t9G_Xcj6Z4tldr43KkA0liYifuhx1Z4GDh__KKc-yVUYwAO3tX39e2AkYclkDvjQOai77t7Yy5G/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQiXnPEE52xGhkz6p9OHC5YEtIgo5DNHCJRXFvzi5GUvXOqQo_lTXrxX0ftoaQTMuSlElCZ634UaXFneC2SXb_c9iNdmONgu0YhrM9Dq5y9CXCO5KzfTCbANE7hI3AzUVO0GdxAtS_8xE/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBqxeRuLW4oLwKnXqYH6SYTL6mfpK3zHvxmUOe4S1Ob9P63aRlSN1YGW-nRWWsvwP475fvwMb829Ev4UV8WngSrMCh4vc6PBtZXV4rxTxXgtxqkonwTcw7lFERiKI3Che_T0fQzmZs0Mz/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9oj1rtAt8-O7uZF5IZJGdJ2zckk-RmcfWibSqwaQMu5QDOoQ-14qLCDVyrpYO9LmEOo2MYtgX4RWENqG25xkrjaITekQgxajIdPjq9pyNHPS-flW0vsug6zcrENLkZbMyiDM0rqWPqZbX/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
</b:if>



Ketujuh, simpan template.

Kedelapan, refresh blog kita dan pastikan tool tersebut sudah “hadir” dalam setiap postingan yang telah kita buat.

Selamat ber-SEO ria.


Description: Cara Memasang Share This Post Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Memasang Share This Post
More aboutCara Memasang Share This Post

Menampilkan Hanya Judul Posting Ketika Label Diklik

Posted by Unknown on Tuesday, June 1, 2010

Cara Menampilkan Hanya Judul PostiLabel Diklik. Ketika jumlah postingan blog kita sudah begitu banyak maka penggunaan label atau kategori akan menjadi bagian yang penting. Penggunaan label akan mempermudah atau mempercepat pengunjung dalam menemukan apa yang mereka cari.

Pada keadaan normal (default), ketika kita mengklik suatu “label” tertentu maka semua postingan dengan label dimaksud akan ditampilkan berikut isi postingannya. Jadi, misalkan saja, suatu label berisi 50 postingan maka ke-50 postingan tersebut akan ditampilkan semua. Dengan kondisi demikian dapat membuat pengunjung menjadi tidak sabar untuk melanjutkan pencariannya. Apalagi kondisi tersebut masih diperparah dengan panjangnya isi setiap postingan yang ada dan juga beratnya loading blog. Dengan kondisi demikian, dapat kita bayangkan betapa lama dan membosankan ketika pengunjung mencari suatu tema/postingan yang mereka kehendaki.

Sehubungan dengan hal tersebut, jika menginginkan, kita dapat mengatur sedemikian rupa sehingga ketika pengunjung mengklik suatu label tertentu, yang ditampilkan hanya judul postingannya saja tanpa disertai isi postingannya. Dengan demikian dapat mempersingkat pengunjung dalam melakukan pencarian karena yang ditampilkan hanya judulnya saja.

Jika menginginkan hal tersebut , berikut langkah-langkahnya.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Widget Template

Ketiga, cari dan temukan kode berikut ini.

<b:include data='post' name='post'/>


Keempat, ganti kode tersebut dengan kode berikut ini.

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>



Kelima, Simpan Template.

Keenam, selesai.

Sekarang, cobalah untuk mengklik salah satu label yang ada dan pastikan bahwa pengaturan baru tersebut telah berjalan dengan baik.

Selamat Mencoba!!!
Description: Menampilkan Hanya Judul Posting Ketika Label Diklik Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menampilkan Hanya Judul Posting Ketika Label Diklik
More aboutMenampilkan Hanya Judul Posting Ketika Label Diklik

Tips Menampilkan Widget Tertentu Hanya Pada Homepage Blog

Posted by Unknown on Friday, April 2, 2010

Tips Menampilkan Widget Tertentu Hanya Pada Homepage Blog. Karena alasan tertentu, misalkan untuk menghemat ruang side bar maupun mempersingkat waktu loading halaman blog, kita dapat mengatur agar widget tertentu hanya muncul pada homepage saja. Dengan pengaturan tersebut, suatu widget (yang kita kehendaki) hanya akan muncul pada halaman homepage saja. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Sebagai contoh dalam kasus ini, misalkan saya ingin agar widget “data pengunjung” hanya muncul pada halaman homepage saja sedangkan pada halaman permalink (postingan) widget ini tidak akan muncul. Begitu juga dengan widget yang lain. Caranya sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, jangan lupa centangi “Expand Templates Widget
Ketiga, cari kode sebagai berikut.

<b:widget id='HTML8' locked='false' title='Data Pengunjung' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Keempat, tambahkan (sisipkan) kode berikut ini (berwarna merah) sehingga menjadi seperti di bawah ini.

<b:widget id='HTML8' locked='false' title='Data Pengunjung' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Kelima, simpan template
Keenam, selesai.

Untuk melihat contoh hasilnya, silakan kunjungi blog Bisnis Internet. Coba perhatikan, Widget "Data Pengunjung" yang ada di side bar sebelah kiri akan muncul pada homepage saja namun ketika kita membuka halaman permalink atau halaman postingan, widget tersebut tidak muncul. Dengan demikian diharapkan dapat mempersingkat/memperingan waktu loading halaman permalink.
Selamat Mencoba!!!!
Description: Tips Menampilkan Widget Tertentu Hanya Pada Homepage Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Menampilkan Widget Tertentu Hanya Pada Homepage Blog
More aboutTips Menampilkan Widget Tertentu Hanya Pada Homepage Blog

Cara Mengganti Tulisan Poskan Komentar

Posted by Unknown on Monday, March 15, 2010

Cara Mengganti Tulisan Poskan Komentar. Pada keadaan default, teks petunjuk komentar yang berada di kotak (form) komentar adalah “Poskan Komentar” atau “Post a Comment” . Jika menginginkan, kita dapat mengganti teks tersebut sesuai dengan keinginan kita masing-masing. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Berikut langkah-langkahnya.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua,centangi pada kotak “Expand Template Widget

Ketiga, kemudian carilah kode berikut ini.

<data:postCommentMsg/>

Kita akan menemukan dua kode tersebut.

Keempat, ganti keduanya dengan tulisan yang kita kehendaki. Dalam contoh ini, saya menggantinya dengan tulisan “silakan berkomentar”.

Kelima, simpan template.

Berikut adalah sebelum dan sesudah modifikasi.

Screenshot sebelum modifikasi.

Screenshot sesudah modifikasi.

Selamat Mencoba!!


Description: Cara Mengganti Tulisan Poskan Komentar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Mengganti Tulisan Poskan Komentar
More aboutCara Mengganti Tulisan Poskan Komentar

Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image

Posted by Unknown on Monday, February 15, 2010

Mengganti Newer Post, Home, dan Older Post (Bagian Kedua). Tips ini merupakan pengembangan dari tips sebelumnya. Jika pada postingan yang lalu, telah Tips dan Trik Blog ketengahkan mengenai cara mengganti tulisan Newer / Older Post dan Home dengan teks atau tulisan yang kita kehendaki maka pada kesempatan kali ini Tips dan Trik Blog akan mencoba mengganti tulisan tersebut dengan menggunakan image atau gambar yang kita inginkan. Misalkan saja dengan tanda panah atau image yang lainnya. Dengan variasi tersebut dapat menjadikan blog kita menjadi lebih menarik daripada sebelumnya. Jika tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkahnya sebagai berikut.

Pertama, siapkan tiga buah image atau gambar (masing-masing untuk Newer Post, Home, dan Older Post) dan uploadlah image tersebut ke image hosting.

Kedua, seperti pada tips sebelumnya, temukan kode seperti di bawah ini. Bagi yang menggunakan Firefox, dapat menggunakan Ctrl + F untuk mempercepat pencarian.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>



Ketiga, silakan kita perhatikan teks yang berwarna merah di atas.
Silakan masing-masing ganti dengan alamat URL image yang telah kita upload sebelumnya.

Sehingga menjadi seperti di bawah ini.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>URL_image_Newer</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>URL_Image_Older</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>URL_Image_Home</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>URL_Image_Home</a>
</b:if>
</b:if>

</div>



Keterangan

Silakan ganti URL_Image_Newer, URL_Image_Older, dan URL_Image_Home dengan URL image yang telah kita siapkan sebelumnya.

Keempat, kemudian simpan template.

Kelima, selesai

Silakan lihat hasilnya dan selamat mencoba!!!

Silakan baca juga bagian pertama.
Description: Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Tulisan Newer Post, Home, dan Older Post Dengan Image
More aboutMengganti Tulisan Newer Post, Home, dan Older Post Dengan Image

Mengganti Tulisan Newer Post, Home, Older Post

Posted by Unknown on Saturday, February 13, 2010

Mengganti Tulisan Newer Post, Home, Older Post. Secara default, untuk mempermudah dan memberikan kenyamanan para pengunjung blog, blogspot menyediakan link Newer Post (Posting Sebelumnya), Home (Halaman Depan), dan Older Post (Posting Sebelumnya). Jika kita menekan link Newer Post maka kita akan dibawa menuju ke halaman postingan sebelumnya. Jika kita menekan link Home maka kita akan dibawa menuju ke halaman depan (home) begitu pula jika kita menekan Older Post maka pengunjung akan dibawa menuju ke halaman posting sesudahnya.

Jika dirasa tulisan tersebut membosankan, kita dapat mengubah tulisan tersebut menjadi tulisan yang sesuai dengan keinginan kita. Misalkan saja, kita ingin mengganti Newer Post menjadi Halaman Sebelumnya, Home diganti dengan Halaman Depan, atau Older Post menjadi Halaman Sesudahnya. Jika menginginkan kita dapat mengganti dengan tulisan-tulisan tersebut dengan tulisan sesuai dengan keinginan masing-masing.

Jika tertarik, berikut ini.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, centangi “Expand Templates Widget

Ketiga, cari kode seperti di bawah ini. Jika kita menggunakan Firefox, gunakan CTRL + F untuk mempercepat pencarian.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>




Keempat, cobalah untuk tulisan yang berwarna merah dengan tulisan yang kita inginkan.
<data:newerPageTitle/> misalkan kita ganti dengan Sebelumnya
<data:olderPageTitle/> misalkan kita ganti dengan Sesudahnya
<data:homeMsg/> misalkan kita ganti dengan Halaman Depan
Sehingga selengkapnya menjadi seperti di bawah ini.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Sebelumnya</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Sesudahnya</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Halaman Depan</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Halaman Depan</a>
</b:if>
</b:if>

</div>



Kelima, kemudian simpan template

Keenam, selesai

Cobalah sekarang refresh blog dan pastikan kita sudah mendapatkan perubahan seperti yang kita kehendaki.

Berikut screenshot tampilan aslinya.


Dan berikut screenshot tampilan setelah kita lakukan perubahan


Selamat Mencoba!!

Silakan untuk membaca Mengganti Newer dan Older Post bagian kedua.
Description: Mengganti Tulisan Newer Post, Home, Older Post Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Tulisan Newer Post, Home, Older Post
More aboutMengganti Tulisan Newer Post, Home, Older Post

Memasang Fasilitas Save as PDF pada Postingan

Posted by Unknown on Wednesday, October 7, 2009

Memasang Fasilitas Save as PDF Pada Postingan. Kita mungkin pernah melihat di bawah setiap postingan (artikel) disediakan fasilitas “save as PDF”. Fasilitas ditujukan untuk memberi kesempatan kepada pengunjung untuk menyimpan postingan yang dianggap menarik ke dalam format PDF.

Sebenarnya, secara default, setiap browser telah menyediakan fasilitas “save as” yang berfungsi untuk menyimpan setiap artikel yang kita anggap menarik dengan format HTML. Namun dengan format tersebut ketika kita ingin membukanya kembali secara offline (tanpa tersambung ke internet), tampilannya akan menjadi kacau alias berantakan. Hal itu disebabkan karena ada bagian-bagian halaman yang menggunakan iframe di mana bagian-bagian tersebut terpisah dari halaman artikel maka ketika kita membukanya dalam keadaan offline, bagian-bagian tersebut akan kehilangan source dan ini yang menyebabkan tampilan artikel menjadi kacau.

Nah, tentunya para pengunjung tidak ingin menyimpan postingan (arikel) yang menarik dengan tampilan yang berantakan, bukan!!

Oleh karena itu, sebagai blogger, kita dapat menjembatani agar pengunjung dapat menyimpan postingan kita dengan format yang lebih baik dan rapi tampilannya, yaitu dengan format PDF.

Sehubungan dengan hal tersebut, kita dapat memasang fasilitas yang memungkinkan para pengunjung menyimpan postingan kita dengan format PDF.

Untuk melakukannya, berikut langkah-langkahnya.

Pertama, karena fasilitas ini menggunakan bantuan layanan pihak ketiga, http://web2.pdfonline.com, maka kita harus mendaftar terlebih dahulu di http://web2.pdfonline.com.

Kedua, karena dalam pendaftaran ini tidak membutuhkan konfirmasi registrasi via email, silakan langsung login dengan menggunakan username dan password yang baru saja kita dafarkan tersebut tentunya setelah sukses melakukan sign up (pendaftaran).

Ketiga, setelah berhasil login, kita akan mendapati halaman pengaturan, seperti paper oriented (portrait/landscape), juga batas atas, bawah, kanan, dan kiri kertas (top margin, bottom margin, left margin, right margin), seperti di bawah ini.

Keempat, kemudian klik button “Generate the Javascript” untuk mendapatkan kode script yang nanti akan kita tempatkan pada blog kita.

Script-nya, seperti di bawah ini.


<!-- START: PDF Online Script -->
<script type="text/javascript">
var authorId = "6B031698-6CB0-4DC8-80C6-D54149915D7B";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>
<!-- END: PDF Online Script -->



Kelima, setelah mendapatkan scriptnya, kemudian kita login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML >>

Jangan lupa centangi “Expand Widget Templates”.

Keenam, kemudian cari kode <p><data:post.body/></p>

Ketujuh, letakkan script yang telah kita dapatkan tersebut di bawah kode di atas, sehingga menjadi seperti di bawah ini.


<p><data:post.body/></p>
<!-- START: PDF Online Script -->
<script type="text/javascript">
var authorId = "6B031698-6CB0-4DC8-80C6-D54149915D7B";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>
<!-- END: PDF Online Script -->


Kedelapan, simpan template.

Kesembilan, selesai

Sekarang, silakan salah satu postingan kemudian pastikan di bawah postingan telah ada fasilitas “save as PDF”.

Selamat Mencoba!!


Description: Memasang Fasilitas Save as PDF pada Postingan Rating: 4.5 Reviewer: Unknown - ItemReviewed: Memasang Fasilitas Save as PDF pada Postingan
More aboutMemasang Fasilitas Save as PDF pada Postingan

Cara Memasang Widget Random Post

Posted by Unknown on Friday, October 2, 2009

Cara Memasang Widget Random Post Pada Blog. Sesuai dengan namanya, Widget Random Post ini berfungsi untuk menampilkan postingan secara acak (random) pada blog sehingga postingan-postingan terdahulu yang tersimpan pada arsip masih tetap dapat disimak oleh pengunjung. Dengan demikian pemasangan widget tersebut dapat dijadikan sebagai salah satu sarana promosi atas postingan-postingan terdahulu. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Widget yang saya dapatkan dari Mas Anang tersebut hanya membatasi untuk 1000 postingan. Untuk memasang widget ini tidak membutuhkan langkah-langkah yang rumit.

Langkah-langkah untuk memasang widget tersebut adalah sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript

Kedua, copy paste kode berikut ini.


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>


Catatan :

Ubah namablog.blogspot.com dengan nama blog masing-masing tanpa diikuti http, misalnya tips-trik-blog.blogspot.com
Angka 10 menunjukkan jumlah postingan yang akan ditampilkan secara acak yang kita ganti sesuai dengan keinginan masing-masing.

Ketiga, Simpan Perubahan.

Keempat, selesai.

Coba sekarang refresh blog dan kemudian pastikan random post telah ada di blog kita dan hasilnya dapat dilihat pada blog all my life atau pada footer blog ini.

Selamat Mencoba!!

(sumber : Anang’s Blog)
Description: Cara Memasang Widget Random Post Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Memasang Widget Random Post
More aboutCara Memasang Widget Random Post

Cara Membuat Related Post

Posted by Unknown on Friday, August 21, 2009

Cara Membuat Related Post atau Artikel Yang Berhubungan. Walaupun postingan bertema seperti judul di atas sudah tergolong “basi” dan juga sudah sering dan banyak diposting oleh banyak blogger namun tidak ada salahnya jika Tips dan Trik Blog pada kesempatan kali ini mencoba untuk menampilkannya kembali, siapa tahu masih ada blogger (terutama new blogger) yang membutuhkannya untuk mengetahui caranya. Jika memang demikian, silakan ikuti tipsnya berikut ini.

Daftar Related post atau artikel yang berhubungan tersebut akan tampil di bawah setiap postingan yang kita buat. Daftar Related Post tersebut berisi postingan yang ber”label” atau mempunyai kategori yang sama dengan postingan yang kita buat tersebut.

Perlunya memasang Related Post (Postingan Yang Terkait)

Dengan memasang Related Post tersebut para pengunjung akan mengetahui postingan-postingan lainnya (artikel yang pernah kita posting sebelumnya) yang mungkin berhubungan dengan postingan yang sedang dibaca oleh pengunjung tersebut. Dengan demikian secara tidak langsung akan dapat “mempromosikan” postingan-postingan kita yang lainnya dan hal ini akan berakibat baik terhadap jumlah pengunjung dan pada akhirnya akan dapat meningkatkan traffic blog kita.

Cara Membuat Related Post Pada Blog

Langsung saja, langkah-langkahnya adalah sebagai berikut.
Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, jangan lupa untuk membackup template untuk mengantisipasi hal-hal yang tidak kita inginkan.
Ketiga, centangi “Expand Widget Template
Keempat, cari dan temukan kode <data:post.body/>
Kelima, tempatkan kode berikut ini di bawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Yang Berhubungan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


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>


Catatan

Silakan untuk mengganti dengan “Artikel Yang Berhubuangan” dengan kata atau kalimat sesuai keinginan masing-masing.

Keenam, lakukan Simpan Template.

Ketujuh, selesai

Selamat Mencoba!!

(sumber : jackbook.com)
Description: Cara Membuat Related Post Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Membuat Related Post
More aboutCara Membuat Related Post

Tips Menyembunyikan Tanggal Postingan

Posted by Unknown on Wednesday, August 5, 2009

Tips Menyembunyikan Tanggal Postingan. Setiap kali kita memposting suatu artikel atau tulisan pada blog maka kita akan dapat melihat tanggal postingan yang berada di atas tulisan tersebut. Tanggal ini dapat kita gunakan untuk memberikan informasi kepada pengunjung mengenai kapan postingan tersebut kita buat. Namun karena alasan tertentu, kita dapat menyembunyikan tanggal postingan tersebut. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Langsung saja, kita ikuti langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML.

Kedua, temukan kode berikut ini, letaknya di bawah kode /* Posts

h2.date-header {
margin:0 28px 0 43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
}



Atau bisa kodenya seperti di bawah ini.

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}



Ketiga, tambahkan kode visibility:hidden pada kode css tersebut di atas sehingga menjadi seperti di bawah ini.

h2.date-header {
margin:0 28px 0 43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
visibility:hidden;
}



Jika kodenya seperti kode nomor dua maka selengkapnya menjadi seperti di bawah ini.

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
visibility:hidden;
}



Keempat, simpan template

Kelima, selesai.

Sekarang cobalah untuk melakukan suatu postingan dan pastikan tanggal postingannya sudah tidak muncul lagi.

Selamat Nge-Blog!!

(Sumber referensi : Tutorial dan Tipsntrik, Tutorial Jitu, Tutorial Blog)
Description: Tips Menyembunyikan Tanggal Postingan Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Menyembunyikan Tanggal Postingan
More aboutTips Menyembunyikan Tanggal Postingan

Membuat Judul Postingan Menjadi Judul Blog

Posted by Unknown on Thursday, May 21, 2009

Membuat Judul Postingan Menjadi Judul Blog : Ketika kita membuka halaman suatu blog, kita akan melihat judul blog diikuti dengan judul postingan pada title bar pada browser yang kita gunakan. Sebagai contoh, ketika kita membuka postingan “Pengaturan Tampilan Komentar Autor Blog” pada blog ini maka kita akan melihat tampilan “Tips dan Trik Blog : Pengaturan Tampilan Autor Blog” pada title bar.

Dengan tampilan seperti itu, selain tulisan yang muncul pada title bar menjadi lebih panjang juga dengan format seperti ini menurut ahli SEO, membuat judul postingan dinilai kurang SEO friendly.

Jika menginginkan, kita dapat membuat judul postingan menjadi judul blog sehingga lebih SEO friendly. Dengan demikian, search engine akan dapat men-detect setiap judul postingan sebagai suatu keyword tersendiri. Selain itu, ketika kita membuka halaman suatu postingan (artikel) tertentu maka yang akan muncul pada title bar hanya judul postingan (artikel) tersebut sehingga lebih simple dan pendek.

Untuk membuat postingan menjadi judul blog, langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Widget Template”

Ketiga, cari dan temukan kode di bawah ini yang letaknya di bawah kode <head>

<title><data:blog.pageTitle/></title>



Keempat, ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>



Kelima, simpan template

Keenam, selesai.

Sekarang refresh blog kemudian buka salah satu postingan dan pastikan judul postingan tersebut sudah muncul pada title bar, seperti dapat kita lihat pada blog ini.

Jika memang blog kita sudah terindex oleh suatu search engine maka ketika kita mengetikkan keyword tertentu pada search engine tersebut, kita akan dapat melihat hasilnya seperti di bawah ini, di mana judul blognya tidak “ikut terbawa" lagi.


Sebelum merubahnya, dalam hasil pencarian dengan suatu search engine kita akan melihat hasilnya seperti di bawah ini, di mana judul blog-nya ikut “terbawa”.


Sukses!!
Description: Membuat Judul Postingan Menjadi Judul Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Judul Postingan Menjadi Judul Blog
More aboutMembuat Judul Postingan Menjadi Judul Blog

Pengaturan dan Kustomasi Judul Sidebar

Posted by Unknown on Tuesday, May 5, 2009

Pengaturan dan Kustomasi Judul Sidebar : Sepertinya banyak blog yang telah membahas tentang tema ini namun tidak ada salahnya jika Tips dan Trik Blog mempostingnya juga, siapa tahu ada di antara para blogger atau pengunjung yang belum mengetahuinya. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Kini, memperoleh template gratis yang bagus-bagus di internet adalah hal yang tidak sulit. Bahkan banyak pembuat template membolehkan template buatan-nya digunakan oleh pengguna lain dengan sukarela tanpa menarik bayaran satu sen pun. Dengan demikian para pengguna atau blogger pemula mempunyai banyak pilihan untuk menggunakan template yang “pas” buat dirinya.

Namun demikian, pasti ada bagian-bagian tertentu dari template yang kita gunakan tersebut kurang pas dengan kita. Bisa saja secara keseluruhan, kita sudah merasa cocok dengan suatu template namun mungkin ada bagian tertentu yang masih “mengganjal”, misalkan pada bagian judul sidebar.

Bagi yang mengalami hal demikian, tidak perlu terburu-buru untuk mengganti template yang ada dengan template yang lain (karena bagaimana pun juga untuk mengganti template dibutuhkan energi ekstra), kita dapat melakukan pengaturan dan kustomasi judul sidebar sedemikian rupa sehingga menjadi “pas” dengan selera atau kebutuhan kita.

Untuk melakukan pengaturan dan kustomasi judul sidebar tersebut, kita harus melakukan modifikasi (mengganti/menghapus) terhadap kode css untuk judul sidebar tersebut. Untuk template default blogger, kita dapat menemukan kode css tersebut dengan format seperti di bawah ini.

.sidebar h2 {
………………….
………………….
………………….
}



Titik-titik tersebut merupakan deklarasi untuk tampilan judul sidebar. Kita dapat memodifikasi deklarasi tersebut sedemikian rupa sehingga tampilan judul sidebar sesuai dengan kemauan kita, antara lain :

Warna Font

Jika menginginkan, kita dapat mengkustomasi warna teks untuk judul sidebar sesuai dengan selera kita masing-masing. Deklarasinya seperti di bawah ini.

font-color: #XXXXXX;



Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan kunjungi di sini.


Ukuran Font

Kita dapat mengkustomasi ukuran font sesuai keinginan kita. Deklarasinya seperti di bawah ini.

Font-size:100%;



100% pada font-size berarti ukuran font sebesar default font, jika menginginkan kita dapat menggantinya dengan prosentase lain, 75% atau bahkan 120%.
Selain secara prosentase, ukuran font dapat didefinisikan dengan satuan pixel (px), misalnya 12px, 15px, dan seterusnya.

Opsi selengkapnya dapat dipilih di antara di bawah ini.

font-size: 75%;
font-size: 15px;
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;



Jenis Font

Kita juga dapat mengkustomasi jenis font agar sesuai dengan keinginan kita, deklarasinya dapat dipilih di antara contoh di bawah ini.

Font-family: verdana;
Font-family: arial;
Font-family: monospace;
Font-family: roman;


Atau dengan menggunakan jenis font yang lainnya.


Ketebalan Font

Kita juga dapat mengatur ketebalan font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;


Font Style

Kita juga dapat mengkustomasi style font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-style: normal;
font-style: italic;



Perataan Teks

Kita dapat mengkustomasi perataan teks untuk judul sidebar dengan deklarasi yang dapat dipilih di antara di bawah ini.

text-align:left;
text-align:center;
text-align:right;
text-align:justify;


Warna Background

Untuk menambahkan warna background, deklarasinya seperti di bawah ini.

background: #XXXXXX;



Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan lihat di sini.

Padding


Padding ini bertujuan untuk memberikan jarak teks dari tepi sehingga teksnya tidak akan bertabrakan dengan bagian luar dari warna background yang kita atur sebelumnya. Deklarasinya seperti di bawah ini.

padding:5px;


Jika dirasa kurang cocok, kita dapat menggantinya dengan angka yang lebih kecil atau bahkan lebih besar lagi.

Text Decoration


Dengan text-decoration ini, kita dapat membuat teks menjadi bergaris bawah, bergaris atas, bergaris tengah, atau bahkan menjadi berkedip. Deklarasi selengkapnya seperti di bawah ini.

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;



Text Transform

Dengan text-transform ini, kita dapat membuat teks menjadi huruf capital, huruf kecil, atau huruf besar pada awal kata. Deklarasinya dapat dipilih di antara di bawah ini.

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;


Border Style

Kita pun dapat menambahkan efek border dengan berbagai bentuk, deklarasinya dapat dipilih di antara di bawah ini.

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;



Border Color

Selain bentuk border, kita pun dapat mengkustomasi warna untuk border. Deklarasinya seperti di bawah ini.

border-color: #XXXXXX;


Kita dapat mengganti kode warna #XXXXXX dengan kode warna lain sesuai selera masing-masing. Untuk mengetahui kode warna, silakan kunjungi di sini.

Nah, dari uraian di atas, kita dapat melakukan modifikasi atau mencoba-coba sendiri untuk mendapatkan tampilan judul sidebar yang sesuai dengan selera masing-masing.

Berikut contoh deklarasi untuk tampilan judul sidebar.

.sidebar h2 {
font-color: #071910;
font-size:120%;
font-family:verdana;
font-weight:bold;
text-align:center;
background:#ACFA58;
padding:5px;
text-decoration:blink;
text-transform:capitalize;
border-style:double;
border-color:#243B0B;
}


Atau kita dapat meringkasnya seperti di bawah ini.

.sidebar h2 {
font:#071910 120% verdana bold;
text-align:center;
text-decoration:blink;
text-transform:capitalize;
background:#ACFA58;
padding:5px;
border : double #243B0B;
}



Contoh hasilnya seperti screenshot di bawah ini.



Selamat Bereksperimen!!

Baca juga yang ini.

Deklarasi Link Teks
Kustomasi Warna dan Efek Pada Link
Description: Pengaturan dan Kustomasi Judul Sidebar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Pengaturan dan Kustomasi Judul Sidebar
More aboutPengaturan dan Kustomasi Judul Sidebar

Mengganti Image Pada Background

Posted by Unknown on Tuesday, March 24, 2009

Mengganti Atau Menambahkan Image Pada Background : Jika pada kesempatan yang lalu, telah dijelaskan cara mengganti warna pada background maka kali ini, Tips dan Trik Blog akan menjelaskan cara mengganti image pada background. Pada prinsipnya, tips ini tidak berbeda jauh dengan tips sebelumnya, hanya mengganti kode warna dengan image (alamat URL image). Jika tertarik, silakan ikuti tipsnya berikut ini.

Sebelum melanjutkan, sebaiknya kita baca postingan tentang cara mengganti warna background terlebih dahulu karena tips kali ini masih berhubungan dengan tips tersebut. Jika sudah, mari kita lanjutkan kepada tips mengganti image pada backround berikut ini.

Yang perlu saya tekankan lagi adalah jangan lupa untuk melakukan pem-backup-an terlebih dahulu untuk mengatisipasi hal-hal yang tidak kita inginkan.

Langkah-langkah mengganti image pada background adalah sebagai berikut.

Pertama, seperti biasanya, lakukan login ke http://blogger.com hingga masuk Dasbor >> Edit HTML
Kedua, cari kode css body, dengan format seperti di bawah ini.

body {
……………..
……………..
}


Untuk mengganti atau menambahkan image pada background, kita harus menambahkan atau mengganti kode dengan format berikut pada tag body tersebut.

background-image: url(alamat_URL_image)


Catatan :
alamat_URL_image adalah alamat image yang sudah kita upload pada photo hosting. Sebagai contoh seperti di bawah ini.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
…………..
………….
}


Jika menginginkan, kita dapat mengganti atau menambahkan image background pada sidebar yang berbeda dan formatnya seperti di bawah ini.

#sidebar-wrapper {
background-image:url(alamat_URL_image);
........
........
}



Jika menginginkan image background pada bodi postingan yang berbeda, kita dapat menuliskannya dengan format seperti di bawah ini.


#main-wrapper {
background-image:url(alamat_URL_image);
…………
…………
}


Ketiga, simpan template
Keempat, selesai

Sebagai contoh, kita akan mengganti image background pada template Minima, milik Blogspot. Pada template tersebut, kita dapat menemukan kode css body-nya adalah seperti di bawah ini.


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Untuk menambahkan image background (misalkan dengan alamat_URL “http://www.geocities.com/yono_pati/blue.jpg”) adalah menjadi seperti di bawah ini.

body {
background:$bgcolor;
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Untuk menambahkan image pada background sidebar, cari kode css sidebar, seperti di bawah ini.

#sidebar-wrapper {
width: 220px;
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 */
}


Misalkan, kita ingin menambahkan image (dgn alamat_URL "http://www.freebackgrounds.com/back-283.gif") tambahkan kode yang berwarna merah, sehingga menjadi seperti di bawah ini.

#sidebar-wrapper {
background-image:url(http://www.freebackgrounds.com/back-283.gif);
width: 220px;
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 */
}


Untuk mengganti/menambah image background pada bodi postingan, cari kode css main-wrapper, seperti di bawah ini.

#main-wrapper {
width: 410px;
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 */
}

Misalkan kita ingin menambahkan image background (dgn alamat_URL "http://www.geocities.com/yono_pati/batahijau.gif) maka tambahkan kode yang berwarna merah sehingga menjadi seperti di bawah ini.

#main-wrapper {
backgroung-image:url(http://www.geocities.com/yono_pati/batahijau.gif);
width: 410px;
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 */
}

Begitu juga jika kita ingin menambahkan image pada header dan footer maka kita harus menambahkan kode "background-image:url(alamat_URL_image)" pada kedua kode css tersebut.

Hasilnya, seperti screenshot di bawah ini.



PERINTAH PERULANGAN IMAGE (REPEAT BACKGROUND IMAGE)

Secara default, image akan ditampilkan secara berulang-ulang untuk memenuhi seluruh halaman blog. Misalkan kita mempunyai image berupa gambar buku kecil maka seluruh halaman akan diisi penuh dengan gambar-gambar buku kecil tersebut hingga memenuhi seluruh halaman blog. Jika menginginkan, kita dapat melakukan kustomasi terhadap perulangan image tersebut dengan pilihan perintah sebagai berikut.

background-repeat:no-repeat;


Dengan perintah tersebut maka tidak ada pengulangan image yang ada.

background-repeat:repeat-x;


Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara horizontal.

background-repeat:repeat-y;


Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara vertical.


MENENTUKAN POSISI IMAGE BACKGROUND (POSITION BACKGROUND IMAGE)

Jika menginginkan, kita dapat menentukan posisi image pada posisi tertentu di dalam suatu halaman blog. Kombinasi posisi dapat dipilih adalah di antara berikut ini.

top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;


Contoh formatnya adalah seperti di bawah ini.

background-position:center center;


Dengan perintah tersebut, image akan berada pada posisi tengah baik secara horizontal maupun vertikal.

Selain itu, kita juga dapat menentukan posisi dengan prosentase atau dalam pixel tertentu, seperti di bawah ini di mana x adalah mewakili nilai horizontal sedangkan y mewakili nilai vertical.

x% y%
xpx ypx


Sebagai contoh, jika kita menginginkan image berada pada posisi 20% secara horizontal dan 10% vertical maka formatnya adalah sebagai berikut.

background-position:20% 10%;




MEMBUAT IMAGE BACKGROUND STATIS

Secara default, image background akan bergerak mengikuti pergerakan scroll baik ke atas maupun ke bawah. Jika menginginkan, kita dapat membuat image tersebut menjadi statis atau tidak bergerak ketika kita melakukan scroll terhadap halaman blog. Perintahnya adalah sebagai berikut.

background-attachment:fixed;



APLIKASI SEMUA PERINTAH

Jika kita memasukkan semua unsur perintah seperti yang telah kita bahas di atas maka kita akan mendapati kode khusus untuk image pada tag body adalah sebagai berikut.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}


Jika menginginkan, kita dapat meringkas perintah-perintah tersebut menjadi seperti di bawah ini tentunya dengan hasil yang sama.

body {
background: url(http://www.geocities.com/yono_pati/blue.jpg) no-repeat center center fixed;
}

Dengan deklarasi seperti itu, image blue.jpg akan ditampilkan satu kali (tidak berulang), dengan posisi ditengah-tengah baik secara horisontal maupun vertikal dengan status statis (walaupun discroll, image tidak akan bergerak).

Selamat Mencoba namun jangan lupa untuk melakukan backup terlebih dahulu!!

(Daftar Bacaan : Tips For New Bloggers)

Baca juga yang ini.

Mengganti Warna Pada Background
Kustomasi Warna dan Efek Pada Link Teks
Tips Trik Laptop
Tips For New Bloggers
Blogging Tips Tricks
Description: Mengganti Image Pada Background Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Image Pada Background
More aboutMengganti Image Pada Background

Mengganti Warna Background

Posted by Unknown on Thursday, March 5, 2009

Mengganti Warna Background Pada Template Blog : Tampilan Background merupakan salah satu elemen blog yang akan memberikan “warna” tersendiri baik oleh pemiliknya maupun para pengunjungnya atau bahkan dapat menjadikan motivasi/inspirasi tertentu bagi yang melihatnya. Mengingat peran pentingnya background tersebut mungkin saatnya mulai sekarang kita perlu untuk lebih “memperhatikan” background ini. Bagi blogger (pemilik blog) yang mungkin merasa bosan atau sekedar ingin mencari “suasana” baru untuk blognya, silakan melakukan kustomasi background bersama Tips Trik Blog berikut ini.

Kustomasi yang akan kita lakukan sehubungan dengan background ini meliputi, mengganti warna background, mengganti dan menentukan posisi image background. Namun untuk postingan kali ini, saya akan membahas kustomasi warna background terlebih dahulu.


Pada kesempatan ini, untuk simulasi dan percobaan, kita akan menggunakan template default blogspot, Son of Moto. Sedangkan untuk template yang lain, tidak akan berbeda jauh untuk melakukan pengeditan kode css-nya.


MENGGANTI WARNA BACKGROUND

Untuk mengganti warna background, kita harus melakukan pengeditan pada kode css yang biasanya dengan format seperti di bawah ini.


body {
background-color:#kode_html_warna;
…………
…………
}


atau bisa seperti di bawah ini


body {
background-color:#kode_html_warna;
…………
…………
}


Catatan
  • Untuk mendapatkan background dengan warna yang kita inginkan, kita dapat mengganti kode kode_html_warna dengan kode html warna yang lain. Untuk mengetahui kode html warna, silakan lihat di sini.
  • Pada contoh kasus ini (template Son of Moto) kita akan menemukan kode css untuk background, seperti di bawah ini.


body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}


Nah, untuk mengganti warna background sesuai yang kita inginkan, misalkan warna hitam (#00000), kita dapat mengganti variable “background” di atas dengan kode “background:#00000” sehingga menjadi seperti di bawah ini.


body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #00000;
font-size: small;
}



MENGGANTI WARNA BACKGROUND PADA SIDEBAR

Jika menginginkan warna background yang berbeda pada sidebar, kita harus melakukan pengeditan pada kode css seperti di bawah ini.


#sidebar {
background-color:#kode_html_warna;
………...
………...
}


Catatan
  • Untuk mendapatkan warna background sidebar yang kita inginkan, kita dapat mengganti kode_html_warna tersebut dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #sidebar mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #sidebar-wrapper, #side-wrap, #side-wrap1, side-wrap2.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css-dengan format seperti ini.


#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}


Nah, untuk mengganti warna background sidebar sesuai yang kita inginkan, misalkan warna hijau muda (#81F781), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#81F781” sehingga menjadi seperti di bawah ini.


#sidebar {
background-color:#81F781;
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}



MENGGANTI WARNA BACKGROUND PADA HALAMAN POSTING

Jika menginginkan warna background yang berbeda pada halaman posting, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#main {
background-color:#kode_html_warna;
………
………
}


Catatan
  • Untuk mendapatkan warna background pada halaman posting yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #main mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #main-wrapper.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css dengan format seperti ini.


#main {
width: 400px;
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 */
}


Nah, untuk mengganti warna background halaman posting sesuai yang kita inginkan, misalkan warna kuning (#F2F5A9), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#F2F5A9” sehingga menjadi seperti di bawah ini.


#main {
background-color:#F2F5A9;
width: 400px;
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 */
}



MENGGANTI WARNA BACKGROUND PADA HEADER

Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#header-wrapper {
background-color:#kode_html_warna;
……….
……….
}


Catatan
  • Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}



#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top $startSide;
}


Nah, untuk mengganti warna background header sesuai yang kita inginkan, misalkan warna hijau lumut (#0B610B), kita harus mengganti variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#header-wrapper {
background-color:#0B610B;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}



#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-color:#0B610B;
background-repeat: repeat-x;
background-position: top $startSide;
}



MENGGANTI WARNA BACKGROUND PADA FOOTER

Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.


#footer {
background-color:#kode_html_warna;
…………
…………
}


Catatan
  • Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}



#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}


Nah, untuk mengganti warna background footer sesuai yang kita inginkan, misalkan warna hijau kekuningan (#BEF781), kita harus mengganti dan menambahkan variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#footer {
background-color:#0B610B
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}



#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: #0B610B;
}



Setelah selesai mengganti warna dengan kode html warna, kemudian simpan template dan pastikan tampilan warna background blog kita telah berubah menjadi seperti yang kita inginkan.

Berikut ini adalah screenshot blog dengan template Son Of Moto sebelum dilakukan pengeditan.


Dan berikut ini screenshot hasil dari otak-atik background di atas.


Selamat Mencoba!!

Deklarasi Link Teks
Menghilangkan Angka Pada Arsip
Tips Trik Komputer
Tips Security
Tips Freeware
Tips Trik Windows XP
Description: Mengganti Warna Background Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Warna Background
More aboutMengganti Warna Background