Wednesday, July 24, 2013

Cara Membuat Widget Sosial Keren

By Rizky Agung | At 4:30 PM | Label : | 2 Comments
http://1.bp.blogspot.com/-N3SABQtEZfo/UO25Q6pEaZI/AAAAAAAACuo/9mQNUr0p7_8/s1600/CJM.png 
RizkyYNWA - Pernah lihat widget diatas ? Mungkin bagi anda blogger yang sering blog walking ke banyak blog, suatu saat anda  pernah menemukan hal yang unik dan menarik dari blog tersebut. Tak jarang kemudian anda ingin juga memiliki hal tersebut. Dalam hal ini saya akan berbagi tutorial untuk membuat widget keren, seperti yang tertera pada gambar diatas. Sebenarnya apasih gunanya mempercantik blog ? Untuk menjawab pertanyaan tersebut insyaallah akan ada pembahasan tersendiri dilain waktu.

Baiklah untuk membuat widget seperti diatas, caranya sangat mudah. Caranya Ikuti panduan dalam artikel ini. 

1. Login ke blogger
2. Setelah anda login, kenudian masuk ke tab tata letak 
3. Pilih tambah gadget dan pilih html/javascript
4. Lalu copy paste kode dibawah ini
<style type='text/css'>
#saye{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#saye a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#saye p{position:relative; height:38px; cursor:pointer; padding: 0 !important;list-style:none;}
#saye .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:1.5px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#saye p:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#saye .icon{overflow:hidden; color:#fafafa;}
#saye .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#saye .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#saye .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#saye .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#saye .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#saye p:hover .icon,
.touch #saye p .icon{width:97%;}
.touch #saye p .facebook, #saye p:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #saye p .twitter, #saye p:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #saye p .googleplus, #saye p:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #saye p .pinterest, #saye p:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #saye p .rss, #saye p:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<div id="saye">
<ul>
<p data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/pridonlot" data-alt="Follow us on Facebook">Ikuti Saya di Facebook</a></p>
<p data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/jasri_DM">Ikuti Saya di Twitter</a></p>
<p data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/103434496702173116380">Ikuti Saya di Google+</a></p>
<p data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/jasridm/">Ikuti Saya di Pinterest</a></p>
<p data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Pri-donlot">Update melalui RSS</a></p>
</ul>
</div>

5. Setelah itu edit font warna merah sesuai dengan milik sobat. Klik simpan

Nah bagaimana, mudah bukan? Untuk melihat artikel tips blogging lainnya sobat bisa lihat di sini. Untuk melihat demo dari widget diatas, kunjungi pri donlot

Cara Membuat Daftar Isi Blog Berdasarkan Waktu Posting

By Rizky Agung | At 6:08 AM | Label : | 0 Comments
http://www.andy-morley.co.uk/wp-content/uploads/2012/02/blogging-tips.jpg
Rizkyynwa - Assalamu'alaikum, bagaimana kabar sobat Rizkyynwa? Semoga baik-baik saja nah setelah beberapa bulan saya jarang mengupdate tentang dunia blog, kali ini saya, hadir kembali membawa satu tips blogging yang tentunya menarik untuk sobat semua praktikkan. 
Tips blogging yang akan Rizkyynwa bagikan adalah cara membuat daftar isi blog berdasar waktu posting. Jadi posting yang terbaru tentunya akan menjadi nomor 1 dalam urutannya. Kelebihannya adalah pengungjung bisa langsung melihat konten yang terbaru dari blog anda. Baik langsung saja, berikut tutorialnya.


1. Login ke Blogger
2. Masuk ke tab laman, pilih laman baru
3. Ubah ke html mode dan copy-pastekan kode dibawah ini
<div style="text-align: left;">
<script src="http://fadilblogx-code.googlecode.com/files/DaftarIsiWaktuFadilblogx.js">
</script><script src="http://mulia-games.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div><div><span style="font-size: x-small;"><a href="http://robot-teknologi">get this widget</a>&nbsp;&nbsp;</span></div><div style="text-align: right;"><span style="font-size: xx-small;"><a href="http://mulia-games.blogspot.com/" style="background-color: white;">Muliagames</a></span></div>
 4. Publish laman

Nah mudah bukan untuk membuat Daftar Isi Blog Berdasarkan Waktu Posting. Semoga bermanfaat, dan jangan lupa like fanpage dan follow twitter + blog ini ya, wassalamu'alaikum.

Saturday, March 23, 2013

Cara Mengganti Favicon Pada Blogger

By Rizky Agung | At 6:33 PM | Label : | 1 Comments
Bisa jadi setiap detil tampilan dan hiasan dari blog-lah yang menarik para pengunjung datang dan berlama-lama di blog karena terpesona dengan hiasan blog anda. Walaupun pengunjung yang hanya melihat-lihat hiasan adalah pengunjung yang tidak memberikan saran, namun, setiap pengunjung adalah 'raja' bagi pemilik blogger. Berbeda dari posting sebelumnya yang berkaitan dengan optimisasi blog yang judulnya Cara Mengecilkan Rank Alexa. Kali ini RizkyYNWA ingin berbagi posting tentang cara untuk mengganti favicon di blog.

Nah sebetulnya apasih favicon itu, favicon adalah singkatan dari 'Favorite Icon' yaitu gambar kecil (biasanya) berukuran 25x25 pixel yang menjadi logo atau brand suatu web. Biasanya favicon ini tampil pada tab browser di sebelah judul seperti yang terlihat pada gambar berikut,
Favicon
Nah, pada gambar tersebut terdapat favicon google dan rizkyynwa, secara umum favicon bisa menjadi ciri khas dari suatu logo. Beragam bentuk logo dan hiasan yang dipasang pada favicon bisa mempercantik tampilan blog anda, bahkan anda dapat memasang gambar beregerak (biasanya ekstensi file .gif) pada favicon. Nah sebelum anda memasang favicon ada baiknya anda menyiapkan foto yang berbentuk persegi dengan ukuran maksimal 100x100 pixel dan dapat terlihat dengan baik setelah dikompresi menjadi 25x25 pixel.

Anda bisa mendesain gambar dengan photoshop maupun coreldraw. Tapi, sekedar rekomendasi sebaiknya menggunakan photoshop agar hasilnya lebih baik. Untuk software photoshop maupun corel draw bisa anda dapatkan di blog Robot-Teknologi. Setelah anda selesai menyiapkan gambar perseginya. Kemudian ikuti langkah-langkah berikut.
1. Pertama pastikan anda sudah login ke Blogger
2. Setelah itu pergi ke tab tata letak seperti yang tertera pada gambar 
3. Pada menutab tata letak, klik tombol edit pada kotak gadget favicon ( bisa dilihat pada gambar)
4. Setelah itu akan muncul kotak seperti ini.

 
5. Lalu klik browse dan pilih foto yang telah anda siapkan. Lalu klik open

Tutorial diatas mungkin sangatlah mudah bagi anda, lebih-lebih para master blogger. Namun disini saya ingin memberikan ilmu ini kepada anda, maklum saya juga masih belajar. Dan dengan terpasangnya favicon bisa menjadi 'brand' dari blog anda. Yang semakin membedakan blog anda dengan yang lain. Tapi ingat jangan ambil favicon orang lain, karena lebih baik anda membuat sendiri walupun kurang bagus seperti yang RizkyYNWA ini miliki. Untuk lebih baiknya anda bisa menggunakan gambar bergerak atau gif, namun ukurannya juga harus persegi dan ukuran maksimalnya adalah 100x100 pixel juga seperti gambar jpeg biasa.

Nah, berhubung  admin sedang mendaftar adsense (semoga approved) insyaallah pada postingan selanjutnya akan saya bahas seluk beluk google adsense dan kriteria blog yang memenuhi syarat untuk bergabung dia AdSense. Untuk info dan tutorial untuk blogger lainnya bisa anda lihat di blog ini, RizkyYNWA. Sekian dan terimakasih, wassalamu'alaikum
  

Tuesday, March 19, 2013

Cara Mengecilkan Rank Alexa

By Rizky Agung | At 8:11 PM | Label : | 9 Comments
Perhatian : baca artikel sampai tuntas agar tidak bingung :)
Beberapa hari yang lalu, download ilmu cuci gudang, alias berubah nama menjadi RizkyYNWA dan sekaligus berubah haluan untuk mengisi blog ini sebagai blog tutorial atau blog yang berisi tentang tutorial ngeblog. Sebenarnya tujuan admin men'cuci gudang' blog ini adalah sebagai eksperimen dan memperbaiki niche blog ini, karena sebelum cuci gudang, blog ini sangat campur aduk dalam niche-nya, ada download game, software, kisah islami, sepakbola, kuliner, dan masih banyak lagi. Walaupun dulu visitornya sampai 700an keatas tapi kebanyakan tidak ada yang masuk pageone google karena serp yang lemah itu, dan serp yang lemah itu disebabkan oleh niche yang beragam tadi.

Nah, di postingan kali ini saya ingin berbagi tips blogging lagi nih, yaitu cara untuk mengecilkan rank alexa. Walaupun dulu saya pernah share tips tersebut namun untuk yang satu ini telah terbukti dan manjur karena cara inilah yang saya gunakan di blog RizkyYNWA ini. Cara ini sangat cocok bagi anda yang fokus dalam satu blog atau tidak memiliki banyak blog, karena cara ini membutuhkan waktu yang intensif dan lumayan banyak. Dengan cara ini dijamin rank alexa anda akan turun, walaupun perlahan tapi ini real bukan fake seperti yang anda dapat ketika anda menggunakan software alexa booster ataupun ultra alexa.

Bagaimana cara menurunkan rank alexa?

Sebelum menjawab itu, saya akan kupas sedikit tentang mekanisme penilaian ranking oleh alexa. Alexa adalah sebuah situs web yang berdiri di bawah amazon.com yang berjalan di bidang penilaian situs online, bisa berupa web ataupun blog. Sistem penilaian ranking alexa ini didasarkan pada : 

  1. Banyaknya pengunjung atau lebih tepatnya pageviews di dalam suatu blog atau website
  2. Kestabilan jumlah pengunjung dan pageviewsnya 
Nah untuk bisa mengecilkan atau menurunkan ranking alexa, yang pertama harus andaa lakukan adalah membuat blog anda ramai dikunjungi. Salah satu caranya anda bisa saling tukar link dengan blogger lain, atau anda bisa mempromosikan blog anda di media sosial seperti facebook dan twitter. Sehingga kemudian banyak orang yang mulai mengenal blog anda. *Sekedar tips, buatlah nama yang eyecatching dan menarik pada blog anda dan usahakan artikel yang anda poskan adalah artikel asli buatan anda. Karena dengan anda menulis artikel sendiri, blog anda akan dikenali juga karena keunikan bentuk bahasanya, mungkin bahasa formal ataupun bahasa gaul.

Setelah promosi dan menulis artikel tadi jangan lupa dengan membagi artikel ke google+ juga karena google plus juga merupakan jejaring sosial yang dampaknya terhadap seo lebih baik ketimbang facebook dan twitter. Dengan google+ anda juga bisa menampilkan foto anda di pencarian google, untuk lebih lengkapnya buka postingan saya di Cara Menampilkan Foto Author di Search Engine Google. Selain mempromosikan blog/website anda di jejaring sosial, ada lagi teknik seo yang perlu anda lakukan. Yaitu dengan menarruh artikel blog di situs bookmark. Sebaiknya dalam melakukan bookmarking, gunakan situs lokal (Indonesia) seperti vivalog dan lintas.me

Teknik seo selanjutnya adalah melakukan ping blog ke search engine. Mempromosikan blog/site ke search engine melalui ping merupakan cara yang cukup ampuh untuk menaikkan pengunjung. Karena ping merupakan cara yang paling ringkas untuk membuat blog dan artikel anda terindeks ke banyak search engine seperti Google, Yahoo! dan Bing dalam 1x klik. Selain itu rajin-rajinlah melakukan blogwalking ke beberapa blog teman atau blog yang anda ketahui dan tinggalkanlah jejak berupa link aktif, agar anda juga mendapat manfaat backlink dari blog yang anda kunjungi.

Secara ringkas
 
Dari uraian yang telah saya sampaikan diatas. Dapat disimpulkan bahwa cara menurunkan rank alexa adalah :
  1. Mempromosikan blog dan artikel pada jejaring sosial, e.g : Facebook, twitter, Google+
  2. Rajin mengupdate postingan asli buatan anda sendiri.
  3. Melakukan bookmarking terhadap blog dan artikel di situs sejenis lintas.me dan vivalog
  4. Melakukan ping pada beberapa situs penyedia jasa ping. Daftarnya bisa dilihat di 10 Situs Pengeruk Ping untuk Blog.
  5. Melakukan blogwalking dan meletakkan link di blog tersebut.
Nah, dari pembahasan tentang cara menurunkan rank alexa diatas, cara tersebut sudah terbukti. Karena cara-cara itulah yang admin gunakan. Dan langkah terakhir yang jangan pernah anda lupakan adalah sabar :) Karena rank alexa anda juga tidak akan serta merta turun. Tetapi rank alexa anda akan turun secara perlahan tetapi pasti dan itu adalah rank asli (tidak mudah anjlok) seperti ketika anda menggunakan software alexa booster/ultra booster. Sekian pembahasan tentang 'Cara Mengecilkan Rank Alexa'. Terus ikuti update tentang tips dan trik blogging lainnya hanya di RizkyYNWA. Wassalamu'alaikum

Tuesday, March 12, 2013

Cara Menampilkan Foto Author di Search Engine Google

By Rizky Agung | At 10:36 AM | Label : | 8 Comments
 http://rienikalestasitanggang.files.wordpress.com/2012/05/google_circles.png
RizkyYNWA - Saat sedang mencari artikel atau sesuatu di google, pernahkah anda melihat seperti gambar diatas. Yaitu terdapat foto profil author di sebelah posting? Yap, memang sudah banyak blogger yang menggunakan tools richsnippets, atau fasilitas dari google webmaster yang digunakan untuk menampilkan foto di google search.

Kelebihan dari menggunakan richsnippets sendiri sangat banyak salah satunya bisa menunjukkan bahwa artikel ini milik kita sendiri (Ini khusus blogger yang tidak copas he..he..).
Selain itu, ada kecenderungan bahwa para netter lebih mempercayai artikel yang ada foto profilnya di google search ketimbang yang cuma kosongan atau biasa saja.

Nah bagaimana, banyak kan manfaat memasang rich snippets di blog? Jika anda ingin memasang simaklah artikel ini sampai tuntas, dan jika ada yang ingin ditanyakan bisa langsung menghubungi saya di Facebook agar lebih cepat direspon, profil saya ada di sini

Persyaratan yang diperlukan untuk menampilkan foto di Google search

Ada 3 (tiga) syarat agar foto Anda dapat tampil di Google search bersebelahan dengan artikel yang Anda tulis.
  1. Syarat pertama, punya blog atau website
  2. Syarat kedua, harus memiliki akun Google Plus. Kalau tidak punya silahkan membuat account Google Plus dengan akun Gmail Anda. 
  3. Syarat ketiga, punya halaman About Me. Yang bisa Anda buat di halaman statis blog Anda atau halaman posting.
Kalau ketiga unsur di atas sudah terpenuhi, ikuti tahap kedua.

Saling menghubungkan ketiga unsur diatas

Ketiga unsur di atas--yaitu blog, halaman About Me, dan Google Plus, harus saling bertautan (link) satu dengan yang lain. Ikuti caranya di bawah:

A. Menautkan (link) akun Google Plus ke Blog/Website.
  • Tempatkan di header atau sidebar atau footer. Cukup satu tautan.
  • Pasang link url Google Plus Anda di blog/situs Anda dengan menambah kode rel="author". 
  • Apabila bingung, copy/paste kode berikut: <ahref="https://plus.google.com/117986633140427520691/"rel="author" target="_blank"> Gabung Google Plus </a>. (contoh)
  • Dan ganti nomor-id-google-plus (117986633140427520691) dengan nomor id G+ Anda. 
  • Contoh: <a href="https://plus.google.com/117986633140427520691/" rel="author" target="_blank"> Gabung Google Plus </a>.
B. Memberi tautan (link) Google Plus di About Me Page
  • Buka halaman About Me yang Anda buat, masukkan link Google Plus Anda dengan tambahan kode rel="me". 
  • Atau, copy paste kode ini: 
  • <a href="https://plus.google.com/google-plus-id" rel="me" target="_blank"> My Google Profile </a>
  • Ganti google-plus-id dengan nomor id Google+ Anda.
  • Jangan lupa simpan perubahan.

C. Memberi tautan Blog/Website dan halaman About Me di akun Google Page.
 Langkah-langkahnya
  • Masuk/login ke: plus.google.com -> klik ikon Profil (atas)
  • Klik Edit Profil -> klik Kontributor untuk (bawah)
  • Klik Tambahkan tautan ubahsuaian
  • Masukkan alamat URL About Me blog Anda.
  • Masukkan alamat URL Blog Anda (opsional).
  • Klik Simpan. Selesai.
Memeriksa hasilnya
  1. Kunjungi google.com/webmasters/tools/richsnippets
  2. Tulis url blog/website Anda pada form yang ada.
  3. Tanda berhasil adalah apabila ada pesan sebagai berikut: "Verified: Authorship markup is verified for this page."
Beberapa Masalah
 Foto profil tetap tidak tampil di Google search

Apabila setelah melakukan semua tips di atas dan sudah lulus tes Google Rich Snippet, tapi masih saja foto Anda tidak tampil berdampingan dengan artikel blog Anda di hasil pencarian Google SERP, maka--menurut tim Google-- kemungkinan penyebabnya adalah salah satu dari 4 faktor sebagai berikut:
Data mark-up tidak mewakili konten utama dari website.
  1. Data mark-up tidak benar atau menyesatkan.
  2. Kandungan mark-up disembunyikan dari pengguna (dengan div yang tersembunyi--black hat)
  3. Situs terkait memiliki sedikit artikel atau halaman. 
Cara lain menampilkan foto di Google Search

Yaitu dengan cara menampilkan nama dan email di setiap halaman posting artikel situs/blog kita. Caranya sebagai berikut:


  1. Pastikan bahwa nama dan email ada di setiap halaman posting artikel.
  2. Tambahkan email baru ke profil Google Anda.
  3. Klik Verify pada email yang tadi Anda masukkan.
  4. Cek email Anda, dan klik link verifikasi dari Google. 
Bagaimana sudah berhasilkah? Memang untuk tutorial blog yang satu ini agak sedikit rumit, selain karena 3 unsur yang harus di miliki anda juga harus memasang keterkaitan link di ketiga unsur tersebut, tapi janganlah menyerah untuk mencoba. 
Terima kasih telah membaca dan mengikuti tutorial ini, untuk informasi tutorial yang lain kunjungi rizkyynwa.blogspot.com
 

Monday, March 11, 2013

Cara Memasang Kotak Like Facebook Melayang di Blog

By Rizky Agung | At 10:44 PM | Label : | 1 Comments
Assalamu'alaikum, bagaimana kabarnya sobat RizkyYNWA semua? Ada sedikit cerita nih, pada saat admin membuat postingan ini, admin sedang bersukacita karena tim favorit admin yaitu Liverpool menang atas Tottenhan 3-2. Walaupun admin disini seorang Liverpudlian, admin tetap akan fair dan respect terhadap sobat-sobat yang menyukai klub lain. #YNWA

Ok, balik ke topik, kali ini RizkyYNWA membawa sebuah tips blogging nih, yaitu cara untuk memasang kotak like facebook secara melayang di blog. Kelebihan dari widget yang melayang ini adalah saat blog anda dibuka akan, visitor akan langsung menjumpai kotak like facebook, sehingga kesempatan fanpage facebook sobat di like semakin besar. Baik, yang belum tahu bagaimana widget yang melayang ini bisa dilihat screenshotnya di sini atau bisa dilihat real demonya di sini.

Bagaimana pendapat sobat? Jika sobat berminat ingin memasang juga, silahkan ikuti tutorialnya berikut ini,
  • Login Ke Akun Blogger
  • Kemudian arahkan ke Layout » Add a Gadget » HTML Java Script
  • Silahkan Copy Paste Kode Berikut ini :
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Downloadilmu&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=335968309757980" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</center>
</div>

NB : Ganti Kode yang berwarna merah dengan Script Like Box Halaman Facebook anda
  • Simpan dan Selesai
Nah, begitulah langkah-langkah untuk memasang kotak like facebook melayang di blog. Untuk informasi seputar teknik blogging, seo dan optimisasi blog lainnya dapat anda simak di RizkyYNWA.Blogspot.Com atau anda juga bisa berlanggan artikel setiap minggunya dengan memasukkan email anda di sidebar kanan blog ini. Sekian wassalamu'alaikum

Sunday, March 10, 2013

Membuat Widget Entri Populer Keren di Blog

By Rizky Agung | At 9:20 AM | Label : | 8 Comments
Membuat Widget Entri Populer Keren di Blog - Entri populer merupakan widget yang menampilkan daftar artikel blog yang paling sering dibaca dan dilihat di blog anda. Widget entri populer  juga bisa menambah ke-eleganan blog selain untuk memudahkan pengunjung mengetahui post yang paling populer.
Sebenarnya dari platform blogger sendiri telah menyediakan fitur entri populer tetapi tampilannya hanya tampilan standar, namun dengan menambahkan sedikit kode css kita bisa mempercantik tampilan entri populer tersebut. Simaklah tutorial berikut untuk membuat widget entri populer yang keren.

Langkah-lankahnya sebagai berikut
1. Login ke blogger
2. Masuk ke tab tata letak > pilih tambah gadget > entri populer > atur yang ditampilkan hanya judul, thumbnail dan cuplikan jangan ditampilkan agar kode cssnya bekerja
3. Kemudian klik simpan 
4. Lalu masuk ke tab template > klik edit html
5. Setelah muncul kotak edit html, cari kode ]]></b:skin> (agar lebih mudah gunakan ctrl+f)
6. Setelah ketemu copy-paste kode dibawah ini tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-raius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
 7. Klik pratinjau terlebih dahulu agar tidak terjadi kesalahan, setelah yakin kode terpasang dengan benar, klik simpan

Nah begitulah cara untuk Membuat Widget Entri Populer Keren di Blog, bagaimana mudah bukan? untuk tips dan trik blogger lainnya bisa anda lihat di RizkyYNWA.Blogspot.com.wassalamu'alaikum

Saturday, March 9, 2013

Cara Memasang Statistik Visitor Histats di Blog

By Rizky Agung | At 8:20 PM | Label : | 9 Comments
Monitor Traffic Blog dengan Histats
Monitor Traffic Blog dengan Histats
Bagaimana cara memasang gadget Histats di blog? Histats merupakan situs web penyedia layanan traffik monitor yang paling mutakir saat ini. Histats mampu memonitor jumlah pengunjung yang sedang online di blog, jumlah visitor dan jumlah halaman yang dilihat atau biasa disebut dengan pageviews. Kelebihan dari histats sendiri adalah perhitungannya yang cukup akurat terhadap fitur asli dari blogger.

Nah, kali ini RizkyYNWA ingin berbagi tutorial untuk memasang widget histats di blog. Tutorialnya sangat mudah, anda tinggal mengikuti langkah-langkah di bawah ini agar tidak terjadi kesalahan.

Berikut tutorial cara memasang gadget Histats di blog:
  1. Daftar dulu / Register di Histats.com , Isikan data sesuai dengan data Anda, jangan lupa ceklist “I have read and agree Publisher Agreement Terms”. Klik “Register”

  1. Cek email Anda untuk aktivasi email
  1. Masuk/login ke Control Panel Histats dengan mengetikkan alamat email dan password yang tadi didaftarkan.
  1. Pada halaman awal control panel, klik “+Add Website”.
  1. Isi data blog sesuai form yang ada, klik “Continue”.
  1. Selanjutnya, klik nama website yang sudah didaftarkan tadi.
  1. Akan terbuka traffic summary blog, untuk menambahkan kode histats di blog klik “Counter Code”.
  1. Selanjutnya klik “add new counter”, akan terbuka pilihan model histas yang akan ditampilkan di blog. Pilih salah satu.
  1. Ceklist data apa saja yang akan ditampilkan pada model histats yang kita pilih, ada Visitor today, Total visitor, Page view today, Total page view, dan users online.
  1. Setelah OK, klik “Save”.
  1. Anda akan kembali ke list counter code, klik ID counter code yang tadi kita buat.
  1. Akan muncul kode/script HTML histats. Copy paste kode/script HTML tersebut di gadget HTLM/Javascript di blog kita.

Friday, March 8, 2013

Menambahkan Widget Footer di Blog

By Rizky Agung | At 4:17 PM | Label : | 3 Comments
Assalamu'alaikum, selamat sore bagi pembaca setia Download Ilmu - RizkyYNWA.blogspot.com, setelah lama tidak update tentang tutorial blog, kali ini Download Ilmu kembali hadir dengan post tutorial blogger, tutorial blogger kali ini berjudul Menambahkan Widget Footer di Blog. 


Sebenarnya footer adalah widget yang sudah tersedia jika anda menggunakan template asli bawaan blogger, tetapi jika anda menggunakan template yang anda buat sendiri ataupun template dari luar blogger mungkin belum memiliki fitur widget footernya. Bagi anda yang belm tahu caranya silahkan simak tutorial berikut ini.
  1. Login dengan akun Blogger sobat Disini
  2. Klik tab Template
  3. Klik edit html
  4. jangan lupa centang expand template widget
  5. Cari Kode  ]]></b:skin> 
CTRL+F / F3
  6. Copy Paste Code Di Bawah ini :D di Atas Kode Tadi ]]></b:skin> 

/* Start HTML http://seallinfo.blogspot.com/ */#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5); background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px; width:1000px;  border:1px solid #dbe1e6}#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  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 */}.lowerbar{margin:0; padding:0}.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px}.lowerbar .widget-content{padding:5px 5px 5px 15px}.lowerbar h2{background:none repeat scroll 0 0 #1C262F;color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase}.main .Blog{border-bottom-width:0}.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none}.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url(http://1.bp.blogspot.com/-PzPP314ZtGE/TgX2iGxUcKI/AAAAAAAAEio/-xqTO1ZeCKo/s1600/bullet-point-image-1.png) no-repeat left}.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none}.lowerbar a:hover{color:#A61111; text-decoration:none}.lowerbar a:visited{color:green; text-decoration:none} /* End HTML http://seallinfo.blogspot.com/ */


7. Cari KodeCari kode  </body> . Cara Mencarinya sama dengan cara Nomer4 Tadi :D \
8. Copy Paste Kode Di Bawah ini di atas  kode tadi  </body> 


<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
8. Kllik pratinjau untuk melihat apakah kode tidak error, setelah tidak ada yang error klik save template.
 
Nah begitulah cara untuk menambah widget footer di blog. sekian, wassalamu'alaikum
 
 

Tuesday, February 19, 2013

Membuat Teks Berjalan Melayang di Blog

By Rizky Agung | At 7:10 PM | Label : | 2 Comments
RizkyYNWA - Bagi sobat RizkyYNWA yang sedang bingung mencari-cari cara untuk membuat teks berjalan di atas/ dibawah layar, (seperti headline). Kini jangan khawatir, karena RizkyYNWA ingin berbagi cara untuk membuat teks tersebut. 

Sebenarnya apa kegunaannya? Kegunaannya sangat beragam tergantung kita yang ingin mengisinya dengan apa, misalnya dengan pengumuman bagi pengunjung blog, salam untuk para pengunjung blog, bisa juga digunakan untuk menempatkan iklan yang berupa iklan baris. Nah untuk membuat fitur tersebut sangatlah mudah anda tinggal mengikuti langkah-langkah yang ada di artikel ini.

1. Login ke Blogger kemudian pilih Template, edit html
2. Jangan lupa centang expand template widget lalu Cari kode ]]></b:skin>
3. Simpan kode berikut ini di atas kode tadi

#running_teks {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
background:#666699;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4.Kemudian cari lagi kode </body> dan simpan kode berikut di atas kode tadi
<div id="running_teks" style="" width="100%" ><marquee direction="left" scrollamount="2" align="center"><a style="font-size: 20px; color: #FF0000">pasang teks berjalannya disini </a></marquee></div>
5. Save template , Selesai.

Keterangan:
Bottom adalah posisi teks, jika ingin menempatkan teks berjalan di atas blog, cukup mengganti bottom dengan top


Background adalah warna latar belakang teks, ganti warna sesuai selera anda
 

Color adalah warna teks, ganti warna sesuai selera anda
 

Direction adalah arah teks berjalan, jika ingin teks berjalan ke kanan, ganti left dengan right

Scrollamount adalah tingkat kecepatan teks berjalan, semakin besar nilai scrollamount maka semakin laju teks berjalan


Font-size adalah ukuran teks, ganti sesuai ukuran teks yang diinginkan.


Nah begitulah tutorial untuk membuat teks berjalan di blog. Untuk tips dan trik blogging lainnya silahkan kunjungi RizkyYNWA.blogspot.com , jika masih bingung dan ingin bertanya silahkan kirim komentar anda, wassalamu'alaikum
 

Site Info

W3 Directory - the World Wide Web Directory

You Follow, I'll Follow Back You

Copyright © 2012. RizkyYNWA - All Rights Reserved B-Seo Versi 3 Edited by RizkyYNWA