Cara Membuat Animasi Loading Blog Keren

Tutorial Belajar Blog - Cara Membuat Animasi Loading Blog Keren  , Blog lebih menarik merupakan idaman setiap blogger yang tidak lebas mempunyai informasi yang bermanfaat yang rame di kunjungi, SEO , mempunyai rating tinggi dll, kali ini Belajar Blog akan berbagi tutorial tentang blog bagaimana membuat animasi loading blog menjadi lebih keren, Tutorial ini merupakan Lanjutan Tutorial Blog Membuat Animasi Loading Blog dan Cara Membuat Animasi Loading Blog Lebih Menarik dimana sekarang untuk yang ingin menyesuaikan warna loading nya dengan warna lain tidak repot merubah dan menggantinya.

KLIK DISINI DEMO LOADING

  MEMASANG ANIMASI LOADING KE BLOGSPOT
Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>

#loadhalaman 
{position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}

.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;

border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}

.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Langkah terakhir, pasang Script dibawah ini diatas tag </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = 
$(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], 
a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], 
a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama 
jika link internal diset dengan target=&#39;_blank&#39;

    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();

    });
});

</script>

Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog Demo, selamat mengoprek :))

Posted By: Unknown on Rabu, 20 Maret 2013

0

Read More

Cara Memasang CSS3 Buttons Untuk Blogger

Tutorial Belajar Blog - Cara Memasang CSS3 Buttons Untuk Blogger, Tutorial Belajar Blog Kali Ini  Mau berbagi Tetang Beberapa Tombol Menarik Dengan CSS3, Mau Lihat Demonya ? Demo

Gimana ? Menarikkan, Tombol Ini Ada Beberapa Macam, Ada Download, Play, Like, dll .CSS3 Buttons Untuk Blogger Bisa Digunakan Untuk Tombol Download Dan Lain-Lain

Berikut Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode Ini  ]]></b:skin>
• Copy Kode Dibawah, Lalu Paste Diatas  ]]></b:skin>

.button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; } /* Hexadecimal entities for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } .next:before { content: "\279C"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; }

• Simpan Template

Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)

<a class="button add"   href="#">Add</a>
<a class="button delete"href="#">Delete</a>
<a class="button edit"  href="#">Edit</a>
<a class="button save"  href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like"  href="#">Like</a>
<a class="button next"  href="#">Next</a>
<a class="button spark" href="#">Spark</a>
<a class="button play"  href="#">Play</a>

Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget

Keterangan HTML Pemanggil

• <a class="button add"   href="#">Add</a> : Tombol Add
• <a class="button delete"href="#">Delete</a> : Tombol Delete
• <a class="button edit"  href="#">Edit</a> : Tombol Edit
• <a class="button save"  href="#">Save</a> : Tombol Save
• <a class="button email" href="#">Email</a> : Tombol Email
• <a class="button like"  href="#">Like</a> : Tombol Like
• <a class="button next"  href="#">Next</a> : Tombol Next
• <a class="button spark" href="#">Spark</a> : Tombol Spark
• <a class="button play"  href="#">Play</a> : Tombol Play

Contoh :
Juka Sobat Ingin Menggunakan Tombol Download Maka Begini Pemanglannya HTML

<a class="button save"  href="URL Tujuan">Download</a>

Semoga Bermanfaat

Posted By: Unknown on Senin, 11 Maret 2013

0

Read More

Cara Membuat Kotak Komentar Blog Menjadi Menarik

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren Blog Menjadi Menarik,Pengunjung Tutorial Blog | Tips BLog Kali  ini melanjutkan postingan sebelumnya Cara Membuat Kotak Komentar Blog Keren, merupakan request dari teman blogger aguz. Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya

• Login ke akun blogger dan masuk ke Edit HTML

• Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

• Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 

/* CSS Komentar */
#form-wrapper {margin-top:20px;}
#comments{overflow:hidden;}
.comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
#comments h4{display:block;padding:5px;line-height:30px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
#comments h4,.comments .user a{font-size:14px}
#comments h4{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
h4#comment-post-message {display:none}
#comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
.comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
.comments .comments-content .comment:first-child {padding-top: 0px;}
.comments .thread-toggle { display: none;}
.comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
.comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
.comment-thread{color:rgb(230, 230, 230); font-size:13px;}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
.comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
.comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
.comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .comment-thread {margin: 20px 0px;}
.comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
.comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
.comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
.comments .comments-content .loadmore {margin-top:0px;}
.comment .continue{display:none}
#comment-editor{width:103%!important;}
.comment-form{width:100%;max-width:100%;margin-top:20px;}

Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

Selamat mencoba dan semoga bermanfaat..

Posted By: Unknown on

0

Read More

Cara Membuat Daftar Isi Menurut Kategori Label

Tutorial Belajar Blog - Cara Membuat Daftar Isi Menurut Kategori Label, Pada postingan kali ini,kita tidak menggunakan hal tersebut karena daftar isi yang kita buat ini di kategorikan menurut kategori label.

SILAHKAN IKUTI LANGKAH-LANGKAH BERIKUT :

• Masuk akun blogger anda
• buat postingan baru dengan judul daftar isi by label - NAMABLOGANDA
• copy script berikut dan pastekan di postingan anda tadi :

<div id="cl_option">

Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 9999;
</script>
<script src="http://imdad.googlecode.com/files/DaftarIsi-Revo2.js">
</script>
<script src="http://tutorialbelajarblogger.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>

• ganti kode berwarna merah dengan url blog anda
• terakhir publikasikan dan lihat hasilnya 

Semoga Membantu dan Bermanfaat , sekilas Tutorial blog tentang Cara Membuat Daftar Isi Menurut Kategori Label

Posted By: Unknown on Minggu, 10 Maret 2013

0

Read More

Tips Memilih Alamat Blog Atau Nama Domain

Tutorial Belajar Blog - Tips Memilih Alamat Blog Atau Nama Domain, Salam blogger, kali ini saya akan sedikit membahas mengenai tips dan trik memilih domain. Alamat atau domain dalam sebuah blog itu ibarat nomor handphone, jika kita tidak tidak tahu Nomornya maka apa daya kita tidak akan bisa menghubungi orang tersebut. Begitu halnya dengan alamat blog, jika alamat blog kita itu asing di telinga orang-orang atau bahkan susah untuk diingat maka jangan harap ada orang yang akan mengunjungi blog kita, itu sedikit gambaran betapa pentingnya suatu Domain.

Apakah sobat masih pusing memilih alamat blog atau nama domain buat blog sobat? Oke gak perlu bingung, sobat tinggal baca artikel dibawah ini dan saya jamin sobat langsung dapat gambaran gimana alamat blog yang baik.

Inilah Beberapa Tips yang perlu anda pertimbangkan dalam memilih suatu Domain:

1. Harus Menggambarkan Blog Anda

Besar kemungkinan bahwa banyak orang akan melihat Alamat ke blog Anda sebelum memiliki keputusan untuk benar-benar membacanya (di search engine melalui proses pencarian, misalnya). Coba tebak, jika hanya dengan melihat nama alamat blog Anda, dan mereka dapat langsung mengetahui apa tema blog Anda, maka mereka akan lebih cenderung untuk mengunjunginya kembali blog Anda.

2. Harus Mudah Diingat

Misalkan blog anda berbicara tentang olah raga, futsal, dan sepak bola secara umum. Penamaan itu "Blog Olah raga, Seluk beluk Futsal dan Dunia Sepak Bola" akan menawarkan dengan uraian yang lengkap dari blog Anda, dan Anda akan mendapatkan cakupan alamat blog yang lebih fokus lagi. Tentu juga mudah yang diingat. Misalnya Kita pilih dengan nama sederhana, yaitu duniabola. Sekali lagi ini hanya suatu gambaran yang dibuat untuk mempermudah Anda.

3. Harus Sama Dengan Nama Domain

Ini adalah suatu prospek kedepan dalam jangka yang panjang. Jika suatu saat Anda memutuskan ingin lebih serius terjun ke dunia blog, suatu saat pasti Anda akan memutuskan membeli suatu domain yang mewakili Brand dari blog Anda. Ini bukan lah hal yang tidak mungkin. Aturan ini sering diabaikan oleh orang, mungkin karena menemukan domain yang cocok yang belum terdaftar adalah tugas yang sulit. Namun jika nama domain Anda tidak cocok dengan nama blog Anda sekarang nanti nya, mungkin akan kehilangan beberapa pembaca sepanjang beriringnya waktu. Walaupun memang secara teori dan praktik, alamat blog lama Anda akan tetap di redirect ke alamat domain baru Anda nantinya. Tetapi akan menjadi suatu nilai tambah, ketika para pengunjung setia Anda melihat alamat blog Anda telah berganti menjadi Domain Anda yang baru. Contoh: tutorialbelajarblogger.blogspot.com menjadi tutorialbelajarblogger com. Jangan sampai ketika orang mengunjungi blog Anda dengan cara pintas melalui cara menghilangkan .blogspot.com Anda dan menggantinya menjadi .com, mereka tidak menemukan blog Anda setelah mereka tekan enter. Mereka hanya akan pergi ke alamat lain.

4. Kesesuaian Dengan Sosial Media

Saya sarankan alamat blog Anda sama dengan username Anda pada situs-situs Sosial Media yang Anda ikuti. Sebagai contoh, Jika alamat blog Anda dan Username Twitter Anda Sama, hal ini bermanfaat untuk memiliki kekuatan dan pengaruh pada optimasi mesin pencari (SEO), yang berarti seberapa dekat ke bagian atas daftar hasil pencarian Anda muncul di mesin pencari seperti Yahoo! atau Google. Jika Anda pebisnis, pertimbangkan untuk menggunakan kata kunci berharga sebagai nama Twitter Anda dan alamat blog Anda.

5. Kesesuaian Nama

Sebuah nama pengguna yang baik adalah sama, atau mirip dengan, atau menggunakan nama Anda sendiri. Untuk kasus ini, terjadi ketika kita inggin membuat blog dengan menggunakan identitas nama kita sendiri. Jika sudah ada pengguna telah mengklaim nama kita, cobalah menambahkan kata sifat atau keterangan, seperti blog atau blogs atau jika perlu masukan nama kita secara lengkap tetapi, jika cara ini masih gagal, atau alamat blog sudah terpakai, bisa dicoba menggunakan nama terakhir Anda sebagai alamat blog Anda. Dengan cara ini, pengunjung secara tidak langsung beranggapan bahwa Anda merupakan orang yang terbuka dan gemar berbagi. Kita juga mendapatkan keuntungan dan nilai jual dari nama kita. Tetapi, Jika Anda lebih memilih untuk orang-orang tidak tahu siapa Anda, Cara ini lebih baik diabaikan saja. Atau Anda dapat memilih nama lain yang sedikit lebih generik, atau lebih umum.

6. Etika Dunia Maya dan Dunia Nyata

Jika Anda lebih memilih untuk menggunakan nama panggilan, alias, bukan nama Anda yang sebenarnya, bukan perusahaan Anda atau nama produk, pastikan untuk memilih alamat blog yang ramah dan mudah diakses. Di dunia blog, tentu saja Anda ingin orang untuk merespon anda, tidak membuat pengunjung terusik oleh alamat blog Anda yang agak bersifat cabul atau dipertanyakan. Dan jika Anda menggunakan alamat blog Anda tersebut didunia nyata, misalkan pernyataan tertulis di kartu nama Anda atau dalam ucapan, tentu saja Anda tidak Akan dibuat malu nantinya.

7. Eksentrik, Sensasi dan Ajang Show Off

Jika anda bertujuan membuat blog adalah ajang mencari sensasi, LUPAKAN semua hal di atas. Pilih lah alamat blog yang bersifat eksentrik, sensasional, bahan ekstrim sesuai tujuan Anda. Tentu saja hal ini lebih cepat mendongkrak popularitas blog Anda. Tentu saja konsekuensi ditanggung Anda.

Nah itulah beberapa hal yang perlu dipertimbangkan dalam memilih alamat atau domain blog, karena domain adalah sektor vital bagi sebuah blog, semoga bermanfaat...

sumber : Berbagai blog dari mbah google

Posted By: Unknown on

0

Read More

Cara Mudah Dan Cepat Merampingkan Alexa Rank

Alexa Rank adalah sebuah Website yang menyediakan informasi tentang Rangking atau peringkat suatu Web/Blog , semakin kecil nilai Web/Blog yang yang di berikan oleh Alexa maka semakin baik lah Web/Blog tersebut contoh nya seperti yang diraih oleh Google sebagai peringkat pertama pada Alexa

Jadi supaya blog populer dimata search engine dan membantu optimasi SEO agar mendapatkan pengunjung yang berlimpah yaitu salah satu nya dengan memperkecil nilai pada Alexa Rank .
Supaya Alexa Rank Blog cepat  ramping dengan mudah yaitu diataranya sebagai berikut :

• Update postingan 1 kali 2 hari dan sekurang nya 2 postingan dalam satu minggu , cara ini telah terbukti sangat ampuh untuk memperkecil nilai pada alexa rank

• Instal Alexa Toolbar pada PC anda , cara ini sangat membantu untuk merampingkan Alexa rank pada blog karena Alexa melakukan penghitungan blog melalui input data dari Alexa Toolbar yang di gunakan pada browser internet di seluruh dunia.

• Buat lah postingan tentang Alexa pada blog sebaik nya buatlah postingan lebih dari satu postingan karena cara ini menurut para pakar blog membuat artikel tentang Alexa Rank sangat membantu mempercepat untuk merampingkan blog dengan mudah

Supaya Alexa Rank blog dengan mudah di analisa sebaik nya pasanglah widget Alexa pada blog untuk mendapatkan kode widget nya kunjungi halaman INI dan cara pasang nya bisa sobat ketahui DISINI

Itulah cara yang saya coba untuk merampingkan Alexa Rank pada blog ini yang dengan cepat , semoga blog sobat mendapatkan nilai yang memuaskan dari Alexa Rank.

Posted By: Unknown on Senin, 04 Maret 2013

0

Read More

Cara Membuat Kotak Komentar Blog Keren

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren,Pengunjung Tutorial Blog | Tips BLog Kali  ini saya ingin membuat postingan tentang membuat Kotak Komentar Blog .Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga walapun sedikit berbeda. 
Ini Priview nya

• Login ke akun blogger dan masuk ke Edit HTML

• Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

• Centang "Expand Widget HTML" ( bila perlu )

 Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 

/*------------- START tutorialbelajarblogger.blogspot.com Threaded Comments  ------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*--------- End tutorialbelajarblogger.blogspot.com Blogger Threaded Comments  ----------*/

• Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOl

nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin> 

<style type='text/css'>

        

/*Start Modif kotak Komentar*/

.comments .comments-content .icon.blog-author{

background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);

}

.comments .comments-content .datetime a{float:right;

}

.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;

}

.comment-actions a{

background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;

}

.comments .comment .comment-actions a:hover,.comments .continue a:hover{

text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;

}

.avatar-image-container{

-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;

}

.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;

}

.deleted-comment{color:gray;font-style:italic;

}

/*End Modif kotak Komentar*/

</style>

OK selesai, coba lihat bagaimana tampilan komentar anda…!

Jangan Lupa tinggalkan Komentar sobat2 ya...

Posted By: Unknown on

0

Read More