Mas Oga: Modif Blog | Your Blog Description

Cara Mudah Membuat Widget Facebook, Twitter, Feed Melayang di Pojok Kanan Bawah Blog

Posted by Unknown Posted on 09.02 with No comments

Cara Mudah Membuat Widget Facebook, Twitter, Feed Melayang di Pojok Blog - Selamat pagi sahabat blogger,salam sejahtera untuk kalian semua. Kali ini mau mencoba berbagi widget untuk blog setelah beberapa hari vacum dari dunia blogging. Widget yang akan saya bahas yaitu widget facebook, twitter, serta feed melayang di pojok kanan blog. Mungkin sudah banyak sekali yang sudah membahas widget yang satu ini, tetapi saya akan mencoba membaginya untuk para sahabat-sahabat Yogagj-Share agar tidak perlu repot-repot lagi mencarinya di mesin pencari mbah Google.

Berikut adalah langkah-langkah dalam pembuatannya :

Login terlebih dahulu ke akun blog sahabat
Masuk ke menu tata letak
Klik tambah gadget
Pilih HTML / JavaScript

Silahkan edit terlebih dahulu kode diatas

Ganti warna merah diatas dengan alamat Facebook sobat
Ganti warna hijau diatas dengan alamat Twitter sobat
Ganti warna biru diatas dengan alamat Feed sobat

Setelah itu klik simpan/save

Bagaimana mudah bukan cara membuatnya?bagi yang tertarik silahkan langsung mencobanya saja.

Label: Modif Blog

Cara Mudah Klaim Blog Di Technorati

Posted by Unknown Posted on 07.38 with No comments

Kali ini saya akan sedikit berbagi info mengenai Cara Verifikasi atau Claim Blog di Technorati. Technorati merupakan sosial bookmark atau salah satu situs search engine khusus blog, dan situs ini memberikan backlink gratis. Karena selain Alexa rank dan Google pagerank, Technorati rank juga merupakan syarat penting untuk mendaftarkan Blog anda pada situs Paid Review, namun sobat harus sudah melakukan claim atas blog sobat.

Awalnya saya bingung bagaimana cara verifikasi Claim Token blog pada Technorati. Setelah beberapa menit menelusuri Google, akhirnya saya mengerti cara melakukan verifikasi Claim Token blog pada Technorati. Setelah mendaftar blog ke Technorati, anda akan mendapatkan email untuk konfirmasi kemudian klik link konfirmasi tersebut dan login lagi pada technorati & berikut langkahnya :

1. Pertama, silahkan anda registrasi terlebih dahulu di http://technorati.com

2. Isilah data Technorati profile, sesuai dengan yang diminta.

3. Setelah proses pendaftaran selesai, lalu sign up dan sekarang bagaimana cara Claim blog di Techorati. Disini saya hanya memfokuskan cara klaim technorati saja.

4. Klik user id yang anda gunakan pada saat pendaftaran (http://technorati.com/account/)

5. Isi URL blog yang ingin anda masukan di menu My claimed blogs – Start a blog claim: URL blogs dan klik Claim.

6. Selanjutnya isi Data blog Anda, Blog title, URL, Feed URL, Site description, Site categories (pilih kategori blog anda min 3 kategori), Site tags.

7. Setelah data yang anda isi sudah benar, klik Proceed to next step.

8. Selanjutnya buka email anda karena kode klaim dikirim ke email.

9. Buat postingan Technorati Claim yang isinya kode yang dikirim ke email anda, sebagai contoh ini adalah kode Token Technorati blog saya : ZZBECQRPASM6 atau bisa juga dengan memasang meta tag pada blog kalian seperti ini dibawah <head>

<meta content='ZZBECQRPASM6' name='TechnoratiVerifyID'/>

10. Setelah anda membuat posting yang berisi kode token Technorati atau memasang meta tag, Selanjutnya silahkan kembali ke akun technorati anda lalu klik Check Klaim pada menu profil My claimed blogs lalu klik Verify Claim Token.

11. Jika langkah di atas sudah anda lakukan semua, silahkan anda tunggu email pemberitahuan yang berisi Technorati Claim Complete.

Label: Modif Blog, Tips n Trick

Menu Navigasi DropDown Dibawah Header

Posted by Unknown Posted on 11.52 with No comments

Menubar dropdown adalah sebuah baris navigasi yang berada tepat dibawah header. Menubar ini berfungsi untuk mempermudah pengunjung dalam mengexplorasi blog kita. Untuk menubar kali ini saya akan membagikan menubar yang saya pake di blog saya. Sebenernya ada lebih dari 20 menubar yang saya ketahui. Ntar saya akan membagikannya dikesempatan berikutnya. Jika anda tertarik, ikuti step by stepnya :

1. Masuk ke Template > Edit

2. Simpan kode dibawah ini tepat diatas ]]></b:skin>

/* NAVIGATION ------------------*/

#nav { display:inline-block; width:1190px; height: 47px; margin: 6px 0px 0px 10px; padding-left:4px;border-top:3px solid #eee; background:transparent;

/*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li { margin-top:2px; margin-right:2px; float:left; position:relative; list-style:none;}#nav a { font-weight:bold; color:#333333; text-decoration:none; display:block; padding:8px 15px; border:1px solid #eee; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px;}

/* selected menu element */ #nav .current a, #nav li:hover > a { background:#7788aa url(../images/bg.png) repeat-x 0 -20px; color:#000; border-top:1px solid #f8f8f8;

box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); text-shadow:0 2px 2px rgba(255,255,255, 0.7);}

/* sublevels */#nav ul li:hover a, #nav li:hover li a { background:none; border:none; color:#000;}#nav ul li a:hover { background:#335599 url(../images/bg.png) repeat-x 0 -100px; color:#fff;

/*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, 0.7);}

#nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;}#nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px;}

/* drop down */#nav li:hover > ul { opacity:1; visibility:visible;}#nav ul { opacity:0; visibility:hidden; padding:0; width: 185px; position: absolute; background:#aabbcc url(../images/bg.png) repeat-x 0 0; border:1px solid #444;

border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

-moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li { float:none; margin:0;}#nav ul a { font-weight:normal; text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul { left:160px; top:0px; top:0px;}#nav ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}

#nav ul li:first-child a:hover:after{ border-bottom-color: #0186ba;} /* =============================Search Box============================= */#srcnt { float:right; margin:0; padding-top:8px; padding-right:13px; width:auto; overflow:hidden;}#search input[type="text"] { border: 1px solid #6699FF; border-radius:3px; color: #777; width: 160px; padding: 8px; font:normal 10px Verdana, Arial; text-transform:uppercase; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}#search input[type="text"]:focus { width: 200px;}

Keterangan : (perhatikan warna bukan tulisan ya)

Kode berwarna merah adalah ukuran dari menu navigasi dan menu search

3. Simpan kode dibawah ini tepat diatas <div id='content-wrapper'>

<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRatJXlLwmFekBlcueTtxSBq9vrPWedMndcJI-JfYVmCs9Wp2Amfj0TZe1Hate01Lzu2irntcDf90tRjhYh9ydCMLEgo8rmOsM96aZ1dR8LGMm0DR3aja954uXzMB4SFxypzhEJTu2Rk/s1600/Home.png' style='padding:0px;'/>Home</a></li>

<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZa-Jki_3rOM8R22HoPHNm9EZabJDvtHGDylqppZPflsxbY1gvxg1JuBLlpb4ebi94WMbyKHBQ9lOxSXf-ZkGFJ3hO-BO2gh9hTpApRL672fH3M5kZ3OkwMi6XieQzdCMIqZfAnwc29Q/s1600/PC.png' style='padding-right:3px;'/>Computer</a>

<ul>
<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Aplication'>Aplication</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Bluestacks'>Bluestacks</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Game'>Games</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Tricks'>Tips dan Trick</a></li>
<li class='hr'/>
</ul>
</li>
<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRFTmopnvWdGE35fMKEaxwfSs2vGrFkUUWRHjzJjOWuQzTaSKRiVRe0mAItWZxZn4jSFpcDGSjh0a1C195criXigc3NtztLaOU2rTJRLNrfwaXP3s4mfohEwGF0p1mb1GIzjCKzOr3xc/s1600/android.png' style='padding-right:3px;'/>Android</a>
<ul>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Aplication'>Aplication</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Games'>Games</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Article'>Tips dan Trick</a></li>
<li class='hr'/>
</ul>
</li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidlmUu_8V23PPqPL5cxAkAipAm9NqY-FizXkj66kE0BiHU_DjbaGlIxOnUbBVL09NlGcZAmQVyx57lt-Xcx3LQZoSJTUjuhrEyxP400GFiRRTHX7aVwom4AP2sYH7kvNyoBZLSkRjRwOE/s1600/blogger.png' style='padding-right:3px;'/>Blogger</a>
<ul>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/SEO'>SEO</a></li>
</ul>
</li>
<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiEfrXVeIoD58177WE9K6h0MSVA2z3vPGadWAtijYbdSQKU1KAIZlNppWmtvsGjV9tHWPjO5zP9K4kg3klSzkHqh9jTejsrr-WCghqX-bCjrDA3Lf0-jwH5wZSKhxkY3J0w3oBUfmcIIQ/s1600/Knowledge.png' style='padding-right:3px;'/>Knowladge</a>
<ul>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Indonesia'>B. Indonesia</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Inggris'>B.Inggris</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Islam'>Islam</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Matematika'>Matematika</a></li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Tips%20dan%20Info'>Tips dan Info</a></li>
</ul>
</li>
<li><a href='http://ujangyoyo.blogspot.com/search/label/Make%20Money'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiE5gnw_ocEpXxf0ZtffCVKIusapneCPTsBgI1LZIMlTUoe6x4qOzYflXJzyGYUJA-agj11P3dTANq4ENtO4xKxj-LTMJdw8hieI6qpqG0H_uUc9Jw7gcLkBxaWsHF6803jWVsPhd5fs/s1600/money.png' style='padding-right:3px;'/>Make Money</a>
</li>
<li><a href='http://ujangyoyo.blogspot.com/2013/03/sitemap-blog.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioST49_aloaAFd5Cmcmt2EisQ-DO01U4WtLzXp1mLFPoLRiEbuX3YFhtCD8M1CkApVw8XUE-DSQOA35CONeZ2oK9yi_zNdYcWCgzmXkB3l0n0zpoQdogKFbEmTGysxWq8nQ6nh7JbDMjo/s1600/Sitemap.png' style='padding-right:3px;'/>Daftar Isi</a>
</li>
<li><a href='http://ujangyoyo.blogspot.com/2013/03/pasang-iklan-murah-di.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fGaCaZnuK-l-3RrYJ4SOJgJFx_IKCFYRMQOUpJjZDVownidKcONu2MZeHdKl-eS3iB0wHYteVZDWdsc0jGJZ73qtX1X2fio2xCJDsUkKM1XBU7oEYuXpc9gjpEJkAg4dzZxJsfmq7Ig/s1600/Iklan.png' style='padding-right:3px;'/>Pasang Iklan</a>
</li>
<li class='current-cat'><a href=LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEDTmpmdOMFye0ZEZRZAZF4ddPQuo8czAoFUOPwE_yMW3Y6k-ZXIJMKrskINXJa1LW-hx5sVWtt08kNV4xp6EzKAS4U0IYYCVSq5pJc3RMvxW6GWKLGkMh98vU0mg_cTgHSO7S_8xtZs/s1600/Help.png' style='padding-right:3px;'/>Help</a>
<ul>
<li><a href='http://ujangyoyo.blogspot.com/2012/12/about-us.html'>About Us</a></li>
<li><a href='http://ujangyoyo.blogspot.com/2012/12/announcement.html'>Anouncement</a></li>
<li><a href='http://ujangyoyo.blogspot.com/2012/12/contact-me.html'>Contact Us</a></li>
<li><a href='http://ujangyoyo.blogspot.com/2013/04/privasi-policy.html'>Privasi Policy</a></li>
</ul>
</li>
<div id='srcnt'>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='looking for something?' size='40' type='text'/>
</form>
</div>
</ul>

Keterangan : (perhatikan warna bukan tulisan ya)

Kode berwarna biru adalah alamat url gambar, anda dapat mengkreasikannya tetapi dengan syarat ukurannya harus 32x32 px
Kode berwarna orange adalah alamat url yang dituju (url dari menu).
Kode berwarna Hijau adalah nama dari menu anda.

Lalu Pilih pratinjau, jika sudah 100% jadi
selanjutnya pilih simpan
###ENJOY....

Label: Modif Blog

Cara Membuat Scroll Box Dalam Postingan

Posted by Unknown Posted on 10.46 with No comments

Hai sobat Yogagj-Share kali ini saya akan posting Cara Membuat Scroll Box Dalam Postingan. scroll box berfungsi untuk meghemat space halaman jadi sebuah halaman kalo isi atikelnya panjang akan sangat efektif menggunakan efek ini.

scroll ini banyak di gunakan untuk memasukan kode memasukan artikel yang terlalu panjang dll.

Oke untuk caranya sendiri sangat mudah kamu hanya tinggal memasukan kode di bawah ini, dan pastikan dalam menulis kode ini dalam mode HTML

<div style="border: 1px solid #ddd; height: 40px;width: 500px;overflow: auto; padding: 10px; ">

Isi artikel dalam scroll .... </div>

Keterangan :
40 adalah tinggi scroll silahkan ganti sesuai selera
500 adalah lebar scroll silahkan ganti sesuai dengan ukuran template masing-masing

Dan Hasilnya seperti di bawah ini :

ini adalah contoh dari artikel tersebut, yang diposting oleh: http://yogagj.blogspot.com
kunjungi terus Blog saya, jangan lupa follow nya

Nah sangat Gampang sekali ya silahkan kamu praktekan di blog kamu dan semoga berhasil.

Label: Modif Blog

Memasang Lazy Load Script di Blog

Posted by Unknown Posted on 10.22 with No comments

Lazy Load Script ini merupakan script yang membuat kinerja pemuatan blog berjalan secara efektif, dengan adanya Lazy load ini blog kita akan memuat element element penting dahulu , yang membuat elemet gambar akan dimuar terakhir, memang terlihat blog kita lebih cepat dengan memakai ini tetapi menurut saya sama saja namun jika kita memakai ini blog kita akan langsung terlihat (tidak lama blanknya), ya dari pada banyak basa basi kita menunuju cara pemasangan.

Masuk Ke Dasboard , Rancangan di pilih edit HTML
Centang Expand Template Widget, dan tunggu
setelah menunggu, copy paste kode berikut diatas kode </head>


    

    <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4u2Q1ZoD4i0HZcjDJAs55MvLfXThcPh_oaElGJkqyB_lIC0wZcVYocbDdFyagWUA0Y1X33L3LuGr4Q3xEzC_o1Zw1ARa87dkmgTVyupkHGxVnx59xB5G1TzmgIcAz25tdvCsoHPpN6w/&quot;,threshold : 200}); }); </script>

Simpan Template

nah bagaimana mudah bukan ??, selamat mencoba dan semoga bermanfaat

Label: Modif Blog

Teknik Untuk Meningkatkan Visitor Blog

Posted by Unknown Posted on 10.09 with No comments

Visitor, hmm visitor mungkin bisa di anggap jantungnya blog kita, mau tidak bagaimana, visitor yang banyak adalah tujuan blog kita, namun tak mudah mendapatkan visitor itu, kita perlu bersabar dan berdoa. tetapi mungkin teknik di bawah ini dapat membantu anda.

Artikel adalah Raja, jadi buatlah artikel yanang berkualitas
Hindarkan Copy paste, silahkan baca artikel Akibat Copy Paste
Semakin banyak Artikel/Posting, lebih baik
Terapkan lah teknik SEO
Buatlah template senyaman . seindah mungkin agar visitor betah, silahkan baca artikel cara memilih template yang baik
Blog harus anda selalu Up To Date
Sering sering blogwalking
Buat Daftar Isi blog
Manfaatkan Social Network
dan terakhir Berdoalah kepada Tuhan yang Maha Esa

Label: Info, Modif Blog

Akibat Orang suka yang Copy Paste

Posted by Unknown Posted on 10.06 with No comments

Copy Paste atau diartikan menyalin artikel masih banyak dilakukan oleh para "Pemalas" . mudah mudahan dengan membaca ini anda yang "Pemalas" Dapat berhenti malasnya.Artikel Copy Paste itu menurut saya SANGAT RUGI kenapa ? karena ada banyak akibat dan ancaman diantaranya :

Tidak dapat Posisi 10 besar di Google

Terlihat Tidak Profesional

Kurang Disukai oleh Blogger lain

Tidak Kreatif

Ancaman Oleh DMCA

Tidak akan pernah dapat Site Link

yah itulaj kerugiannya maka dari itu mari biasakan diri untuk menulis artikel yang dibuat asli oleh kita selain kita bangga juga sangat berpengaruh pada posisi SERP. Sekian dan Semoga Berguna.

Label: Info, Modif Blog

Cara Memilih Template Blog Yang Baik

Posted by Unknown Posted on 09.30 with No comments

mungkin banyak orang bertanya "Bagaimanasih template yang bagus itu ?" nah kali ini saya akan membahasnya.

1. Template Harus Tertata rapih
Tentunya jika kita memiliki template acak acakan dari tataletak sampai bentuk tulisan yang kurang nyaman pengunjung akan malas berkunjung karena tidak enak dipandang. contoh tata letak yang baik ada pada gambar nomor 2. pas dari posisi header, kanan dan kiri sampai footer.

2. Posisi Widget Berada dikanan

Menurut saya ini cukup penting karena template yang bagus itu posisi widget ada dikanan karena saat memuat laman cara memuatnya melalui proses , proses itu bermulai dari header, kiri, kanan sampai akhirnya footer. Lalu mengapa ? jika widget ada dikanan otomatis yang dimuat itu isinya dahulu dan ini membuat lama loadingnya lebih cepat.

3. Tidak mengutamakan template yang Banyak untuk slot Iklan

Memang blog itu bisa dijadikan sumber penghasilan tetapi jika kita memasang iklan berlebihan kita akan merasa tidak enak dilihat, lagi pula jika terlalu banyak terlihat mencari uangnya (hehehehe...)

4. Cari Template yang Simpel

Template yang simpel disukai pengunjung karena selain lebih cepat membuat tampilanya pun pas.

5. Carilah warna yang simple dan serasi

yah pasti kita kurang enak jika melihat blog yang lebay dengan warna. menurut saya justru itu tidak membuat elegant, saya rekomendasikan template yang memiliki 3 warna unsur saja. kalau direkomendasikan sih yang monocrome (2 warna)

yah itulah 5 tips yang bisa membuat kita memilah dan memilih template, semoga bermanfaat !

Label: Modif Blog, Tips n Trick

Cara Membuat 2 Widget Berdampingan Dalam 1 Kolom

Posted by Unknown Posted on 21.58 with No comments

Widget atau Gadget memang merupakan sebuah elemen penting yang dijadikan sebagai tempat untuk menaruh berbagai macam perangkat yang digunakan dengan susunan HTML, Javascript, Feed, jQuery dan lainnya. Nah, apabila di bagian sidebar kita hanya terdapat satu buah kolom dan ingin merubah dari satu kolom menjadi dua buah kolom tentu akan membuat kedua kolom tersebut semakin kecil dan sempit.

Untuk itu Cara yang paling ampuh untuk mengatasi masalah tersebut adalah dengan cara menggabungkan kedua widget tadi menjadi satu bagian dalam satu buah elemen Gadget. Cara Menjadikan kedua buah widget tanpa harus membagi menjadi banyak colomn di sidebar adalah seperti berikut ini :

<table><tr>

<td>Kode Widget Anda</td>

</tr>

</table>

Anda hanya tinggal merubah tulisan Kode Widget Anda dengan script elemen HTML/Javascript saja. Saya akan menjabarkan secara detail mengenai script diatas. Kode <td> adalah untuk menampilkan widget Anda satu persatu mengarah ke samping kanan, sehingga kode td ini dapat dipakai untuk menggabungkan 2 buah widget secara sejajar dan teratur. Sedangkan kode <tr> adalah elemen untuk menampilkan widget ke posisi atas dan bawah. Jadi, Anda dapat mengaturnya secara bebas tinggal memilih penggunaan td atau tr kah yang ingin Anda pakai untuk merapihkan kedua atau lebih widget Anda.

Tetapi jangan lupa, gunakan tanda slash * / * seperti yang diapit oleh tanda bintang, pada penutup td dan tr untuk setiap satu buah widget. Contohnya seperti ini </td> atau </tr>. Sedangkan kode tabel adalah untuk membuat elemen sesuatu menjadi dua atau banyak baris dan kolom.

Sumber : Sumber : http://impoint.blogspot.com/2013/01/cara-membuat-2-widget-berdampingan.html

Label: Modif Blog

Cara Mengetahui Kecepatan Blog

Posted by Unknown Posted on 22.11 with No comments

Cara mengetahui seberapa lambat blog kita

Apakah kamu pernah peduli dengan kecepatan blog anda ? Tidak ? Kecepatan Blog sangat penting karena kebanyakan zaman sekarang orang pada tidak sabaran dan ingin instan terutama indonesia :) jadi kita harus peduli dengan kecepatan blog kita , lalu gimana caranya ? Mudah, Internet sangat lengkap. Tentu Internet juga menyediakannya kan?

Membandingkan Website orang lain

Membandingkan website dengan lainnya selalu bermanfaat karena Blog akan lebih dan lebih ingin tahu dalam mengembangkan situs web yang lebih baik daripada yang lain. apa kegunaan adanya Alat yang membandingkan kecepatan dua website ? Di satu sisi, tampak menyenangkan karena Anda dapat bersaing dengan sesama blogger Anda yang yang memiliki kecepatan yang paling cepat. Sementara di sisi lain, hal ini sangat berguna untuk membandingkan waktu buka situs Anda dengan situs profesional. Cukup ikuti petunjuk berikut untuk mulai membandingkan kecepatan situs Anda.

1. Pergi ke http://whichloadsfaster.com

2. Di sana anda dapat membandingkan dua website terkenal seperti Apple dengan Adobe atau anda dapat membandingkan blog anda dengan blog lain.

Mengetahui kecepatan loading blog dan memperbaikinya

Apakah kalian ingin blog/website anda diukur oleh Website terkenal seperti Google atau Yahoo ? Mereka mempunyai pendapat mereka bagaimana mengetahui apakah suatu website cepat/ lambat. Yahoo memiliki YSlow dan Google memiliki PageSpeed.

Tetapi kalau dicek satu-satu kan kelamaan solusinya adalah GTMetrix. GTMetrix akan mengecek blog anda melalui PageRank dan Yslow bahkan GTMetrix akan memberitahu anda bagaimana cara memperbaikinya.

1. Pergi ke gtmetrix.com

2. Masukkan halaman blog anda di tempat yang disediakan

3. Tunggu sampai Gtmetrix selesai mengecek Pekerjaannya

4. Lalu anda akan mengetahui seberapa borosnya blog anda. semakin kecil persentasenya, semakin lambat blog anda

Berikut Screenshot dari blog saya ( pada tanggal 21/04/2013 )

Untuk ukuran blogger, sebenarnya ini sangat bagus. Anda tahu bahwa blogger memiliki kekurangan, jadi nilai tercepat loading blog yang memiliki artikel lebih dari 25 itu Page speednya maksimal 95 % dan Yslow nya maksimal 90 % ( untuk yang tidak punya artikel, maksimal PageSpeednya 98% dan Yslownya 95% )

Blogger Tidak mengejinkan kita

Mengedit htaccess
Mengatur expirenya cache
Mengaktifkan Gzip di blog kita
Mengaktifkan CDN
dll

Jadi jangan berkecil hati jika nilainya dibawah 90%, asal mendatangkan konten yang berkualitas seperti MBT yang nilai pagespeednya hanya 60% tetapi pageranknya 5 dan alexanya 4000, kurasa pengunjung akan sabar :)

Baiklah cukup artikel hari ini, anda boleh mengshare artikel ini agar berguna dengan catatan anda menuliskan sumbernya.

Label: Modif Blog, Tips n Trick

Widget Profil Blogger Stylish Dengan CSS

Posted by Unknown Posted on 11.51 with No comments

Widget Profil Blogger Stylish Dengan CSS ini terinspirasi dari salah satu sahabat blogger saya http://www.tipstrikblogging.com dalam postinganya tentang Modifikasi Widget Profil Blogger. Sebenernya itu widget sudah keren dengan efek hover pada gambarnya tapi saya mendesain ulang widget tersebut dengan menambahkan css pseudo element dan juga memberikan efek warna-warni pada nama profil. Yaaaaa kurang lebih seperti gambar diatas

atau lihat Demonya

DEMO

Untuk memasangnya sangat mudah, ikuti saja langkah-langkah berikut ini

1. Login akun blogger anda

2. Pada dashboard pilih Tata Letak » Tambah Gadget » HTML/JavaScript

3. Masukkan kode berikut ini


<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
  border:1px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:400px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#0097BD;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-moz-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-keyframes name-author {
  0% {color:white}
 20% {color:Orange}
 40% {color:pink}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:white}
}

/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>

<div class='aboutme-image-container'>

<img src="http://lh4.googleusercontent.com/-eR6Q7G1DJXs/AAAAAAAAAAI/AAAAAAAABk4/ULGS6C8ILMc/s512-c/photo.jpg" />

</div> 

<div class='name-author'>

<h3>Abdul Rohman</h3></div>

<div class='aboutme-text'>Hidup itu seperti CSS, kita bisa merubahnya menjadi lebih berwarna dan memberikan background yang indah. Dan hidup itu seperti... sepertinya saya tidak tau lagi dh.. <a href="YOUR LINK BLOGGER PROFIL/G+" style="color: #666;">...Read More</a>

</div></div>

// Pengaturan !!

Ganti tulisan yang berwarna BIRU dengan URL gambar anda

Ganti tulisan yang berwarna MERAH dengan NAMA anda

Ganti tulisan yang berwarna HIJAU dengan tulisan atau kutipan tentang anda

Ganti tulisan yang berwarna KUNING dengan URL profil anda, bisa blogger ataupun Google+
4. Jika sudah, langsung Simpan

5. Lalu simpan Setelan dan lihat hasilnya

Demikin posting tentang Widget Profil Blogger Stylish Dengan CSS semoga bermanfaat.

Sumber : http://mdf-blog.blogspot.com/2013/05/widget-profil-blogger-stylish-dengan-css.html

Label: Modif Blog

Membuat Komentar Blogger Bergaya Facebook

Posted by Unknown Posted on 18.41 with No comments

1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Cari kode ]]>

4. Tambahkan kode ini diatas ]]>

/* CSS Komentar Blogspot - Tema Facebook */ .comments { font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51); } .comments .comments-content a {color:#3B5998 !important;} .comments h2, .comments h3, .comments h4 { font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important; font-size:16px;} .comments .comments-content .comment { margin:0 0 0; padding:10px 0px 10px 0px; border-top:1px solid #e9e9e9; border-left:none; } .comments .comment .comment-header, .comments .comment .comment-actions, .comments .comment .comment-actions a, .comments .comment .comment-thread.inline-thread, .comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;} .comments .comment .comment-header {margin-bottom:4px;} .comments .comment .comment-header .datetime a {color:#808080 !important;} .comments .comment .comment-actions a {padding-right:5px;} .comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px} .comments .comment .avatar-image-container, .comments .comment .avatar-image-container img { width:50px; height:50px; max-width:none; max-height:none; border:none; padding:0; margin:0; outline:none; } .comments .comment .comment-block {margin:0 0 0 60px !important;} .comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;} .comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;} .comments .comment .comment-thread.inline-thread .comment { background-color:#EDEFF4; padding:5px 5px 0; margin:1px 0 0; border:none; border-bottom:1px solid #D2D9E7; } .comments .comment .comment-thread.inline-thread .comment .avatar-image-container, .comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;} .comments .comment .comment-thread.inline-thread .comment .comment-block { margin:0 0 0 40px !important;} .comments .comment .comment-content {text-align:left;} .comments .comments-content .icon.blog-author { width:16px; height:16px; display:inline-block; vertical-align:top; background:transparent url('/favicon.ico') no-repeat 50% 50%;} .comments .comment .comment-thread.inline-thread .comment:last-child { border-left:2px solid #A8B2CE !important; }

5. Simpan Template
enjoy...

Sumber:http://gopar-site.blogspot.com/2012/07/cara-membuat-komentar-blogger-seperti.html

Label: Modif Blog

Mas Oga

Cara Mudah Membuat Widget Facebook, Twitter, Feed Melayang di Pojok Kanan Bawah Blog

Cara Mudah Klaim Blog Di Technorati

Menu Navigasi DropDown Dibawah Header

Cara Membuat Scroll Box Dalam Postingan

Memasang Lazy Load Script di Blog

Teknik Untuk Meningkatkan Visitor Blog

Akibat Orang suka yang Copy Paste

Cara Memilih Template Blog Yang Baik

Cara Membuat 2 Widget Berdampingan Dalam 1 Kolom

Cara Mengetahui Kecepatan Blog

Membandingkan Website orang lain

Mengetahui kecepatan loading blog dan memperbaikinya

Blogger Tidak mengejinkan kita

Widget Profil Blogger Stylish Dengan CSS

Membuat Komentar Blogger Bergaya Facebook

Labels

Arsip Blog

Popular Posts

Test Footer

Random post

Yoga Gjhenqydhama

Another Test Footer