Griya Dalem: Januari 2012

Please click show to view

Selasa, 24 Januari 2012

Award Pertama

Sedang asyik-asyiknya menjalankan rutinitas posting di blog, secara mengejutkan saya mendapatkan pemberitahuan yang terpangpang di message cbox saya seperti di bawah ini :

erig rolando: siang mas..ada hadiah ntuu..silahkan ambil :-)

verar: hadiah apa

erig rolando: hehe ia sob :-) diambil ya sob

setelah saya click ke alamat pengunjung setia di site saya itu dengan ID erig rolando alangkah kagetnya saya karena mendapatkan sesuatu yang tidak pernah saya duga-duga sebelumnya. Award dari salah seorang teman karena kegigihan saya di dalam berkunjung atau blogwalking ke blog tersebut. Awalnya sih sempat heran masak sih saya dapet hadiah itu, padahal umur blog saya baru satu tahun. Apa boleh di kata berkat artikel yang saya rajin post berkala di blog ini dan rutinitas blogwalking saya. Akhirnya saya mendapatkan bayaran yang sepadan yang diberikan oleh seorang teman Erig Rolando. Award petama saya :

Award dari :

Erig Rolando

Terima kasih kawan atas hadiahnya, di akhir ujung post ini saya ucapkan terima kasih. Mari kita pererat tali persaudaraan di antara komunitas blogger. Bila anda membaca artikel saya ini dan ingin memperoleh hasil yang sama seperti apa yang saya dapatkan. Jangan pernah ragu-ragu untuk berkunjung ke site ini dan menjadi pengunjung setia site ini. Maka lambat laun pasti anda mendapatkan hasil sama seperti saya.

Senin, 23 Januari 2012

Cara Membuat Tulisan Berwarna Di CBOX (blog)

Kawan-kawan setia pengunjung site ini saya akan share kepada anda mengenai bagaimana "Cara Membuat Tulisan Berwarna Di CBOX " pada blog anda. Bila anda sering melihat di site-site yang biasanya mengedepankan jasa cbox untuk media komunikasi dengan para pengunjung di site tersebut. Biasanya sering kali banyaknya coment yang menggunakan efek tulisan berwarna. Hmmm, dulunya saya penasaran bagaimana mereka dapat memberikan efek warna pada tulisan coment mereka padahal setahu saya pada cbox tidak ada tool atau opsi kode warna. Berkat kerja keras dan sedikit keuletan search di om google akhirnya ketemu jalan terang. Dan pada kesempatan kali ini saya dapat share ke anda mengenai cara pengerjaannya. Siip dah, silakan di praktekan ilmu ini semoga bermanfaat bagi anda. Di bawah ini sudah saya sisipkan code dan contoh penerapannya.

Pertama login dulu ke site anda atau buka site orang yang memakai jasa cbox pada site mereka
Selanjutnya isi ID anda pada kotak isian nama,url,dan message anda.
Untuk efek tulisan berwarna silakan apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color] pada message yang akan anda postkan. Contoh: [color=blue]teks biru[/color] hasilnya teks biru.
Terakhir click pada go atau tekan enter pada keyboard dan lihat hasilnya.

Keterangan :

Kode-kode warna:

[color=red] [/color]
[color=blue] [/color]
[color=green] [/color]
[color=yellow] [/color]
[color=pink] [/color]
[color=purple] [/color]
[color=brown] [/color]
[color=bronze] [/color]
[color=orange] [/color]
[color=black] [/color]
[color=white] [/color]
[color=gold] [/color]
[color=silver] [/color]
[color=violet] [/color]
[color=hotpink] [/color]
[color=navyblue] [/color]
[color=tan] [/color]
[color=aqua] [/color]
[color=teal] [/color]
[color=lime] [/color]

Cara Memodifikasi Tulisan Di CBOX Blog versi II

Di pagi hari ini saya akan sharing kepada anda mengenai bagaimana "Cara Memodifikasi Tulisan Di CBOX Blog versi II" . Anda tentunya sudah membaca artikel saya sebelumnya tentang "Cara Memodifikasi Tulisan Di CBOX Blog versi I" . Post kali ini merupakan lanjutan dari artikel saya sebelumnya untuk memodifikasi tulisan di cbox anda, jika anda berminat untuk mempraktekan artikel terbaru dari saya. Mari langsung buruan dicoba, di bawah ini saya sudah sisipkan beberapa code yang anda butuhkan.

Cara Membuat Teks Berukuran Besar (Big) di CBOX
Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
Contoh: [big]tulisan besar[/big] hasilnya tulisan besar

Cara Membuat Tulisan Berukuran Kecil (Small) di CBOX
Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Tulisan Rata Tengah (Center) di CBOX
Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
Contoh: [center]rata tengah[/center]

Cara Membuat Teks Berjalan (Marquee) di CBOX
Apit kata-kata yang ingin dibuat bergerak dengan [scroll] dan [/scroll]
Contoh: [scroll]teks berjalan[/scroll]

Cara Membuat Teks Ber Link di CBOX
Apit kata-kata yang ingin diberi link dengan [url=alamattujuan] dan [/url]
Contoh: [url=http://www.verarfujastawan.blogspot.com]Blogger Lamongan[/url]

Cara Memodifikasi Tulisan Di CBOX Blog versi I

Di pagi hari ini saya akan sharing kepada anda mengenai bagaimana "Cara Memodifikasi Tulisan Di CBOX Blog versi I" . Anda tentunya sudah membaca artikel saya sebelumnya tentang "Cara Mengganti Emoticon Cbox di Blog" Hmmm...masih ada cara jitu untuk memodifikasi cbox anda salah satunya dengan variasi pada tulisan di cbox, jika anda berminat ayo langsung di terapkan pada cbox anda. Di bawah ini saya sisipkan beberapa code yang bisa membantu anda.

Cara Membuat Teks Miring (Italic Style) di CBOX

Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]

Contoh: [i]teks miring[/i] hasilnya teks miring

Cara Membuat Teks Tebal (Bold Style) di CBOX

Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]

Contoh: [b]teks tebal[/b] hasilnya teks tebal

Cara Membuat Teks Bergaris Bawah (Underline Style) di CBOX

Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]

Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah (Strike Style) di CBOX

Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]

Contoh: [s]teks dicoret[/s] hasilnya teks dicoret

Cara Membuat Navigasi Halaman Google di Blog

Sering di dalam kita mencari sesuatu di dunia maya khususnya internet. Kita sering memakai jasa dari seacrh engine baik itu om google yang sudah ngehits ataupun media penyedia jasa lainnya. Pada tampilan media tersebut pastilah menggunakan navigasi halaman guna membantu memudahkan pengunjung setia kita untuk pindah dari satu halaman ke halaman yang lain. Maka dari pada itu sekarang saya akan membahas mengenai "Cara Membuat Navigasi Halaman Google Di Blog". Mari simak proses pengerjaannya :

Hal awal yang harus anda lakukan adalah login dulu ke blog anda pilih dasbord => rancangan => edit HTML.
Selanjutnya cari code "]]></b:skin>" (untuk memudahkan pencarian anda silakan tekan Ctrl + F pada keyboard.
Kemudian letakan code di bawah ini tepat di atas kode "]]></b:skin>".

Jika sudah, sekarang cari lagi code "</body>".
Kemudian letakan code di bawah ini diatas kode "</body>".

script type='text/javascript'>

var home_page_url = location.href;

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

if(postNum==1) postNum++;
html += html3+ '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){
upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

if(postNum==1) postNum++;
html += html3+ '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Untuk menyimpan dan melihat hasilnya silakan tekan buttom save.

Keterangan :

var pageCount=10; (dapat anda ganti sesuai keinginan anda).
var displayPageNum=6; (dapat anda ganti sesuai keinginan anda).
var upPageWord ='Previous'; (bisa anda ganti dengan kata sebelumnya).
var downPageWord ='Next'; (bisa kalian ganti dengan kata selanjutnya).
Page ('+(postNum-1)+') (Untuk menampilkan kata page(10)/jumlah halaman).

Cara Membuat Beautiful Slide Out Navigation Di Blog

Mohon maaf sebelumnya kepada pengunjung tetap blog ini karena dalam 2 hari kemari saya tidak berkesempatan untuk membagi sedikit informasi kepada anda. Untuk menebus semua itu kali ini saya akan share pada anda tips blogger yang saya rasa anda pasti menyukainya. Pokok bahasan kita kali ini yaitu mengenai bagaimana " Cara Membuat Beautiful Slide Out Navigation Di Blog ". Mari langsung ke TKP.

Step 1 :

Pertama login ke blog anda.
Selanjutnya masuk ke dasbord pilih rancangan => edit Html, cari code "]]></b:skin>"
Copy dan paste code berikut ini di atas code "]]></b:skin>"

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4rbEYXbWQP6YoQoZeAaUmlgIFqwU1_9WGKH-ZmTAQo8734j9PKR8wfSnd2g5Klw33NA1YxEhz1bGcP6bwRFLEcaWq48RU5_yAIzKb5M2Uvu9OruUqnFHcRyHVBn9tGSOSMYz-nDnn3w/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmKniqPceXAWW9gpV8pRBQRYhAiascYDlALg2SWbC_ElDAYyIFo69ZO9qF9s6YDHDxmn2t3LI-M3lyxIt-le25BmLDQpdq6E0SYjI27cIUNzqFfCFP6G2IRIAEK5EcprQQgWoyjdX_Z4/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_l16RQ0Vg9wZVQ70AceHmmYjSMF4-IuMmHdu_r8yc18sL-6gSZYYOEvUtTX3p0XZnPJLsYqp3Gyo-hhjWwzEgkJ1sKLDNYM1h2_QhyYg5ov6psFxbWq98i1MHuipjKOj7oKQm4Iro2IE/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-H46RYS90EtSHhKWXNLyRynyh6GyGXmAjj5bWvcuuNZOU3TsCmOWboclU8ZK9F1e-alS-o6RlAu2Ku0PriaOIuAHUsTeNdKHTHpKuDtdWa20uAxvL5ptBBguCiBOf1thUNosK0ktWHTQ/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdnULjbx-S_j_pa1gaiV0zOOtuoP8mPlTMArm2baqzNJo601TIt8dC5DClvhpx2QyhGHN0seuQtT06nR8SphjQXWfn21wpQeRcBw4m5YeKU02hDZST-OSO_YqPo-h_QSjGDB6iSh8FAaU/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsknJPxOSS-HqZRQU-Ym5V1vWCUNKD5sMWpSwMQXiBJr1SIipn4MLrpJvNcG_OWn_roGKpgp0_wJu1ZlAYQh_Qx7MCmeDxgMvzMyDFc-_UZVaqquCErYV1Q7PAom3WCDuW7HckJn5VqOc/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Z0OUs2tjZ4bB1gEEfXXi9lh5_EdxosPs1WqqVZ2t43EiujCalCh0TzpGQQxXn_ZvHE9e__y3r8mpFWYAO8bsHtXg57Xoy6WNN-klNM0EIn8NR3Fm7uyfaWIH8-FxOxBzHvvo3TH6Dpo/s1600/mail.png);

Step 2 :

Copy dan paste code berikut ini di atas code "</head>"

Step 3 :

Untuk memanggilnya copy dan paste code berikut ini di atas code "<body>"

Finally,save as untuk menyimpan and melihat hasilnya.

Keterangan :

Silahkan ganti code "#" dengan link yang akan anda inginkan.

Kamis, 19 Januari 2012

Cara Mengganti Gambar Kursor Di Blog

Di sore hari ini saya akan share kepada anda mengenai bagaimana "Cara Mengganti Gambar Kursor Di Blog". Jika berbicara tentang "Cara Mengganti Gambar Kursor Di Blog" sangatlah mudah, asal sesuai dengan langkah-langkah yang saya share ke sobat kali ini. Unyuk memudahkan pencarian anda saya merekomendasikan url situs penyedia gambar yaitu " http://www.totallyfreecursors.com/" jadi kita tinggal memilih sesuai dengan keinginan kita. Untuk cara pemasangnya gambar kursor ini di blog anda, anda harus menambahkan code CSS supaya dapat dipasang pada template anda. Di bawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut url alamat situs di atas.

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif
URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif
URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif
URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif
URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

Cara mengganti gambar kursor di blog :

Pertama login dulu ke dashboard blog anda.
Selanjutnya pilih Rancangan => Edit HTML(centang Expand widget template).
Carilah code"</head>" pada template anda dengan menggunakan Ctrl F.
Copy code CSS dibawah ini dan letakkan tepat diatas kode "</head>".

Gantilah code "http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot" dengan url kursor yang anda inginkan.
Terakhir untuk menyimpan dan meliat hasilnya, silakan tekan buttom save.

Note :

Silakan tinggalkan komentar sebagai bekas jejak anda di site ini,supaya anda mendapatkan kunjungan balik dari site ini.
Don't forget !!! Follow me at my blog.

Rounder Corner : Cara Membuat Sudut Menjadi Tumpul

Tadi pagi saya telah membagi sedikit ilmu saya kepada anda mengenai bagaimana " Cara Membuat Energy Saving Mode Dengan CSS"di blog. Di kesempatan kali ini kembali saya hadir mengajak anda untuk sedikit membahas tips blogger mengenai bagaimana "Cara Membuat Sudut Menjadi Tumpul Atau Juga Disebut Rounder Corner".

Tentu anda semua bertanya-tanya mengenai apakah yang dimaksud dengan "rounded corner". Sebelum melangkah lebih jauh,akan saya jelaskan pengertian atau kegunaannya.

Author : Yang dimaksud dengan rounded corner yaitu efek membuat sudut menjadi tumpul.
Pengunjung : Tiap ujung di site kita ya gan?
Author : Yuph bener, mau bikin yang tumpul bagian mana bisa. Yuuk langsung ke TKP.

Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image). Kemudian bentukkan rounded corner dari kode CSS ini akan hanya dapat dilihat bila anda menggunakan browser Firefox, Chrome, dan Safari.

Tahapan-tahapnya sebagai berikut :

Login dulu ke blog anda.
Selanjutnya pilih apa yang anda mau buat menjadi tumpul.
Kemudian copy paste code dibawah ini, letakan di tempat yang saudara kehendaki. Misalnya kotak pencarian.

Full rounded corner :

Rounded corner di kiri atas :

Rounded corner di atas :

Rounded corner di bawah :

Finally click buttom save.

Keterangan :

Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Rabu, 18 Januari 2012

Cara Membuat Energy Saving Mode Dengan CSS

Mohon maaf bagi anda yang sudah nunggu post update dari saya, ada sedikit kesibukan yang membuat aktifitas posting saya sedikit terhabat. Nah untuk menemani pagi anda kali ini saya akan berbagi sedikit tips sederhana kepada anda. Pokok bahasan kita kali ini mengenai " Cara Membuat Energy Saving Mode Dengan CSS"di blog.

Pengunjung : buruan dibahas gan, saya jadi penasaran?

Author : Iya sabar bentar sekarang saya postkan.

Contoh :

Silakan click disini "Demo"

Ini merupakan salah tips yang berguna untuk memperindah tampilan blog anda. langsung saja ke langkah pengerjaannya :

Seperti biasa login dulu ke akun blog anda.
Kemudian pada Dasbor click Rancangan => Tambah Gadget => Pilih HTML Java/Script.
Selanjutnya copy paste code di bawah ini.

<div class='saving'>
<p class='esm1'>Griya Dalem<br/>
<span class='esm2'>Energy Saving Mode using CSS3</span><br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p> </div>

Ganti code yang berwarna pada "<p class='esm1'>Griya Dalem<br/>" dengan nama anda.
Finnaly, save as your file.

Note :

Mohon donasi dari anda dengan memfollow site ini agar lebih baik kedepannya.
Kritik dan saran yang membangun sangat kami perlukan kedepannya.

Griya Dalem

Follower

Category

Labels

Blogger templates

Chat Comunity

My Friend Links

Goegle translate

Tukar Link

Labels

Popular

About Me

Selasa, 24 Januari 2012

Award Pertama

Senin, 23 Januari 2012

Cara Membuat Tulisan Berwarna Di CBOX (blog)

Cara Memodifikasi Tulisan Di CBOX Blog versi II

Cara Memodifikasi Tulisan Di CBOX Blog versi I

Cara Membuat Navigasi Halaman Google di Blog

Cara Membuat Beautiful Slide Out Navigation Di Blog

Kamis, 19 Januari 2012

Cara Mengganti Gambar Kursor Di Blog

Rounder Corner : Cara Membuat Sudut Menjadi Tumpul

Rabu, 18 Januari 2012

Cara Membuat Energy Saving Mode Dengan CSS

Labels

Blog Archive