Senin, 02 Januari 2012
Johny Magazine, Template Magazine untuk Blog Berita
Diposting oleh
ayo Indonesia
Satu lagi template hasil utak-atik saya dari template luar biasa yang bernama Minima. Walaupun sederhana ternyata template ini bisa dengan mudah dimodifikasi sehingga menjadi template yang multifungsi. Template yang saya buat eh maaf yang saya modifikasi ini saya beri nama Johny Magazine, karena memang tampilan pada homepage penuh dengan artikel-artikel inti dari keseluruhan konten dari sebuah blog.
Untuk para master blogger sebelumnya saya minta maaf, bukannya saya sok pintar karena sudah berhasil memodifikasi template sederhana menjadi template yang multi fungsi ini, karena saya baru proses belajar membuat template jadi kalau ada kode-kode atau script yang kurang berguna dan semestinya tidak dipakai mohon sarannya ya...
Template Johny Magazine ini mempunyai 3 kolom di hompage, kolom pertama terdapat slider content di bagian paling atas, walaupun ukurannya kecil tapi cukup untuk mempercatik tampilan. Artikel-artikel terbaru saya letakkan di tengah atau pada kolom kedua dan di bawahnya saya tambah satu lagi widget yang terserah nanti mau diisi apa. Pada kolom ketiga atau sebelah kanan saya bagi menjadi dua baris, pada baris pertama bagian atas terdapat sidebar tabber yang hanya saya munculkan pada homepage saja. Untuk lebih jelasnya lihat screenshot bagian header dan footer (klik gambar untuk memperbesar).
Bagian Header
Bagian Footer
Pada postpage atau halaman postingan terdapat dua kolom, sengaja memang tidak ditambahkan apa-apa paling cuma fitur kotak komentar yang lebih menarik itu saja. Kalau ada yang menambahkan dengan related post bisa juga diletakkan di bawah postingan atau di sidebar kanan. Pada bagian footer, nah ini kelemahan saya, saya kurang bisa memodifikasi dengan sentuhan warna-warna yang memukau paling cuma modifikasi gambar dari internet pakai photoshop sederhana.
Langsung saja daripada berbusa-busa ngomong nggak karuan di bawah ini ada link demo untuk melihat lebih jelas tentang Johny Magazine template ini, dan yang pasti saya sertakan juga link downloadnya siapa tahu ada temen-temen yang tertarik untuk memakainya paling tidak ada perasaan bangga juga sih template hasil utak-atik sendiri dipakai sama orang lain.... hehehehehe. Jangan lupa lihat juga template hasil modifikasi saya yang lain Johny Portal atau template Download Disini modifikasi. Untuk tutorial lengkap Johny Magazine template ini silahkan baca Tutorial Widget Johny Magazine Template.
Jika ada yang menginginkan slider template ini bekerja secara otomatis, templates ini sudah saya updates dan bisa di download ulang disini. Untuk menampilkan postingan pada slider, Anda hanya mencari kode berikut label1 = "misteri", misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Untuk lebih jelasnya bisa dibaca pada artikel Membuat Image Slider Berdasarkan Kategori Tertentu.
Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker pada template ini tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :
dan Anda ganti dengan kode berikut :
Terakhir save templates
Note :
<script src='http://Download Disini.googlecode.com/files/ticker.js' type='text/javascript'/>
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Terakhir save templates
Note :
- If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
- And for Johny Portal, Download Disini and Johny Magazine user template, change this code (post body close to the header):Into :
#crosscol-wrapper{margin:0 auto;padding:0 auto}#crosscol-wrapper{margin:0 auto;padding:5px}
Minggu, 01 Januari 2012
Template Download Disini Modifikasi
Diposting oleh
ayo Indonesia
Berawal dari seorang sahabat Maspena kalau nggak salah namanya, dia menanyakan template yang saya pakai dan boleh minta nggak? Tentu saja boleh, disini saya ingin berbagi tapi sabar dulu ya, saya lagi memodifikasi template tersebut sehingga cocok dipasang untuk blog dengan konten apapun. Template blog ini aslinya adalah techstop. Tapi menurut saya template ini kurang fleksibel karena hanya bisa digunakan untuk blog dengan konten tutorial atau semacam catatan harian. Sehingga banyak sekali bagian yang mesti dimodifikasi.
Untuk itu saya mencoba mencari template yang simple saja untuk memodifikasi template yang mirip dengan yang saya pakai sekarang ini. Template Download Disini Modifikasi yang sudah jadi sekarang ini awalnya adalah template Minima dengan dua kolom, kemudian saya bagi menjadi 3 kolom di bagian homepage, dan hanya 2 kolom di bagian post dan page. Tujuan saya membagi menjadi 3 kolom di homepage agar lebih fleksibel, jadi bisa juga dipakai temen-temen yang mempunyai blog dengan konten berita misalnya. Berikut ini screenshot bagian homepage dan postpage (klik gambar untuk memperbesar) :
Ada beberapa perbedaan tampilan template ini dengan yang saya pakai, selain bagian homepage, kotak berlangganan feedburner juga saya rubah sehingga sekarang mejadi satu bagian dengan fitur related post. Jadi lebih memberikan ruang kosong di bagian sidebar. Untuk bagian sidebar lebar, sengaja di bagian bawah tidak saya bagi lagi menjadi dua karena sudah saya sediakan sidebar kecil di bagian homepage.
Oke sekarang saya akan berikan beberapa kode yang mesti dipasang di bagian sidebar sehingga tampilannya mirip dengan blog yang saya pakai sekarang ini :
- Translate gambar bendera (sidebar lebar atas)
Sebenernya tutorialnya sudah banyak beredar di internet, tapi daripada anda susah-susah nyarinya langsung saja saya berikan kode scriptnya untuk dipasang :<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_o2qoZIWjwkmXauC8-Es7UlTVKzQyS3Az_wogqmMAbzwh0ECbHSyJm7B573tsZndIcE3AOKUtVje9aORrmL0Qmu2GntALq-ZBmEY2FAtWsAh0qke145g4Zg-tM62WJtsvWz5niJDr_o/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUK04KoHWjRMvBj_Ee22A9f6dUpYjiPxMLc4Ip5oFdRKXU-FjpLiVAdqiucxp3LUdKTcqRENdoYxLIV708rdRTBPShosXVIuyH0ExGf8qV7SeHhsdMrbF-S9E_lkfvN95ucihhgLz8Vw/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlTOJ4-l0HlJ7Kp_Txizfd40Bi-E25T0edS6bfDWxfsXKwGh0dOerrjZ2Gl0Leqfk1Ax7ageu-I4o0nHlUhDy4q5ucwGjDRfFEOoox-um9McZ1Ix6QpP0yYOSFvvPyk-Tl7ibXAb0X1hU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9LXHBHsYh7D6fvasHmL5RNLA1F1ZIiewBS03NsbHSWuq1AFEhyxtzt5qk4RkhLcJyAEIkfn0wh6ghckBWGcHT8GX3fQoz3eRjnWozUzpq5fR7spvn839jQGT8Q6IWEQWzZiIvT9JGxMsI/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4fXh8wp3StUBf4aacAJ3YCV41Ih-50cVdbV_6OYPEukr-W5xKaeJSMU3KIZT6WcDkcF1yV5B1MH3ygQN6JDVUiiVfyepW4g4hQszDO2hqyuDpHrYZplo2qivWN4qKq_P1zkbgD9lAZM/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUwkXxEHJ5LIjAU14rBGMj_DpHqT3cKWyrm7TCNf0C3lwspm72-H7LOSZdLvG3UKqey04fqdwhtc9H-pgXYk5i8TgICSq6DiWwDtYTTbWCHmp_bJGa1mxboBOfzSah1VUEhcHsRWAeayWR/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfhznizI5HHyjH1Abda_vDNMQRZy0LGoUvbAkSvF6iqFsYzEkvGhRmO44GfxaNMqvNbGP_7QeWnd_i2_UA8cdFq-JXMdt-q_4igjlCiCSBe_i8JmszkeCQnRV9HY_kXWDsF0UXxKeJYk/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7R505xQfEojpP2MhPFvbRdY6Spim0ZAmkKocNfiHCRYCMxifJCKo5sSkvfpHjDoIbxT8qrzCdM8UI1vGvJajl9g5mvV90JlGYMSRWpbKem2g2TypbiKfK7QDKYt5ULssjAZoCOlDPfs/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div> - Tab ViewPada bagian ini, tab view yang saya pakai masih manual, sekarang sudah banyak cara membuat tab view yang lebih gampang misalnya dengan menambah sentuhan jQuery. Tapi nggak ada salahnya jika kode script yang saya pakai di blog ini saya bagikan kepada anda (Untuk lebih jelasnya bisa dibaca pada tutorial membuat tab view):<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 92px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color:#999999;
padding-top: 6px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #444343; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #F2F2F2;
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI66wcAUygVSXs4PfkV5lFY-kTZKqe4FCedKiO6mOW20wHzBmzgmnG1-2Vj_KYa6Xvs7NnS7ai2cBoAbdo3l3jzlAjXK7jJQeCRgC7O3yRw2OexcXmw9uVa2s0_fpKj_JXjRXokmLD_mw//") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 298px;">
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
<div class="Pages" style="height: 200px; width: 298px;">
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
</div>
</div>
</form>
<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script> - Artikel Terbaru
Kode script yang dipasang :Di bagian paling bawah, ganti URL nya dengan URL blog anda<div style="background: none repeat scroll 0% 0% rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://kauman.googlecode.com/files/recentpostsbylabel.js">
</script>
<script src="http://freedownloadcopasthemes.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div> - Untuk membuat huruf awal dalam postingan menjadi besar seperti dalam postingan ini sangat mudah, silahkan baca tutorialnya tentang Membuat Huruf Besar (Drop Cap) pada Awal Postingan.
Sepertinya hanya itu yang mesti dipasang agar mirip dengan blog yang saya pakai ini, untuk bagian lain Anda bisa berkreasi sendiri atau memodifikasi sendiri sesuai dengan selera. Wah iya hampir lupa di bawah ini saya sertakan link dimana anda bisa melihat demo dan bisa mendownloadnya secara gratis.
NB :
- Buat yang menginginkan tampilan template ini dua kolom seperti yang saya pakai, silahkan menuju link ini.
- Setelah anda download dan filenya diekstrak, terdapat dua file xml yang satu dengan menggunakan show/hide comment dan satu lagi tanpa show/hide comment
- Jika ada masalah dengan link downloadnya bisa tanyakan ke kotak komentar atau konfirmasi ke johnytemplate@gmail.com.
- Untuk tutorial Johny Portal masih dalam perbaikan, jadi mohon untuk bersabar
- If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Download Disini and Johny Simple Magazine templates).
- And for Johny Portal, Download Disini and Johny Magazine user template, change this code (post body close to the header):Into :
#crosscol-wrapper{margin:0 auto;padding:0 auto}#crosscol-wrapper{margin:0 auto;padding:5px}
Sabtu, 31 Desember 2011
Free Download "Suteki Dane" MP3
Diposting oleh
ayo Indonesia
Salah satu lagu yang enak di dengar menurut saya. Easy listening kalo bahasa jawanya. Santai, Adem, Dan pas liat video klip ala Final Fantasy nya serasa gimana gitu. Soalnya di video itu, tokoh animasi cowonya yang ganteng mirip saya lho hehheee...
Ini Lho videonya saya sabet dari youtube ...
Yang mau streaming mp3nya di sini :
DOWNLOAD : Suteki Dane.mp3
Ini Lirik Lagu Suteki Dane:
Ini Lho videonya saya sabet dari youtube ...
Yang mau streaming mp3nya di sini :
DOWNLOAD : Suteki Dane.mp3
Ini Lirik Lagu Suteki Dane:
Jumat, 30 Desember 2011
Download Script Portal p4r46hcyb3rn3t /v3
Diposting oleh
ayo Indonesia
Banyak temen-temen yang menanyakan script portal p4r46hcyb3rn3t. Mungkin sebelumnya ada yang mengira jika portal tersebut adalah sebuah file flash :D, Lebih tepatnya itu adalah rekayasa flash . Saya memang sengaja ingin membuat orang yang melihat merasa jika itu adalah flash. Dan ternyata saya berhasil sedikit mengecoh dari tampilannya. Prinsipnya menghasilkan tampilan flash tanpa flash hehheee..
Johny Portal, Template untuk Situs Berita
Diposting oleh
ayo Indonesia
Untuk temen-temen yang ingin membuat blog/situs berita, saya ada satu template keren yang mungkin cocok dipasang di blog anda. Langsung saja ya, karena sudah malem ngantuk nih besok mesti kerja. Di bawah ini screenshotnya (klik gambar untuk memperbesar) :
Bagian Header
Bagian Footer
Cara pasangnya sangat mudah tinggal filenya diekstrak dulu, kemudian upload. Jika ada yang masih bingung nanti saya buat tutorialnya. Malam semua.... zzzzzzzzzzzzzzzzzzzz.
Kode script untuk slider
Ganti semua URL gambar dan judul dengan url yang ingin anda tampilkan dalam slideshow
Kode Script untuk Label/kategori sidebar
Masukkan kode di bawah ini ke dalam kotak HTML/Javascript :
Mengganti kotak pencarian (search) adsense
Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu
Mengganti Adsense di postingan
Cari kode ini, letaknya di bawah kode ini <div style="color: #333333; font: italic 12px Georgia; margin-top: 10px; padding: 8px 10px 8px 70px;">
Setelah ketemu ganti dengan kode adsense anda ukuran 468 x 60 (kode adsense di parse dulu)
dan Anda ganti dengan kode berikut :
Terakhir save templates
Note :
Bagian Header
Bagian Footer
Cara pasangnya sangat mudah tinggal filenya diekstrak dulu, kemudian upload. Jika ada yang masih bingung nanti saya buat tutorialnya. Malam semua.... zzzzzzzzzzzzzzzzzzzz.
Kode script untuk slider
<div class="img400" id="gal1" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-_ZEAo0OVDP4/TvzO8LGCdbI/AAAAAAAAAF8/0cS-zTHZ62I/s1600/woman-drinking-water.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Drinking 8 Glasses Of Water A Day Is ‘Nonsense,’ Doc Says</a>
</div>
<div class="summary">
The health recommendation to drink six to eight glasses of water a day is “thoroughly debunked nonsense,” a doctor wrote this week in a commentary...... <a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal2">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-jix-0-LKBeY/Tv1Xj1a0TPI/AAAAAAAAAGI/YdT9M9yyLhs/s1600/watermelon_slice.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">What to Eat to Beat Skin Cancer</a></div>
<div class="summary">
You got the pale-is-the-new-tan memo years ago and have the sun smarts to prove it. Skin cancer is the most common cancer in the United States, and women age 39 and under have a higher....... <a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal3" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-ZjafkrVQpPg/Tv1XlJTtLxI/AAAAAAAAAGQ/kolxM1NCKv4/s1600/floyd-money-mayweather-415x301-1.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Get in Fighting Shape with Mayweather and Mosley</a></div>
<div class="summary">
Floyd Mayweather was dressed in a nice suit, standing on a stage in Manhattan in front of journalists and fans. His soon-to-be opponent Shane Mosley, was equally..... <a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal4" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-0yMJYPvnpfI/Tv1Xl_EbrlI/AAAAAAAAAGY/ha44RdLAoE4/s1600/India-doesnt-let-blasts-derail-Pakistan-talks.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">India doesn’t let blasts derail Pakistan talks</a></div>
<div class="summary">
India brushed off speculation tying the Mumbai bombings to Pakistan and said Friday it remained committed to recently renewed peace talks with its rival neighbor. The moves showed how little......<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal5" style="display: none;">
<div class="h250">
<img alt="" src="http://4.bp.blogspot.com/-t5-_jkUlhWU/Tv1Xn8mzP0I/AAAAAAAAAGg/Wb3apNMv5yo/s1600/Mexican-authorities-find-massive-marijuana-plantation.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Mexican authorities find massive marijuana plantation </a></div>
<div class="summary">
Hidden between tomato stalks, the Mexican army found what officials describe as the largest marijuana plantation in the nation, a top military official ...... <a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal6" style="display: none;">
<div class="h250">
<img alt="" src="http://3.bp.blogspot.com/-aM5ALuNLByo/Tv1XonbIqiI/AAAAAAAAAGo/WuZEntRhoMQ/s1600/President-Obama-and-Dalai-Lama.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Dalai Lama Visit: President Obama Meets Spiritual Leader, China Complains</a>
</div>
<div class="summary">
President Barack Obama held a White House meeting Saturday with the Dalai Lama, a fellow Nobel Peace laureate...... <a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Read Full Post</a></div>
</div>
</div>
</div>
<div style="height: 255px; margin-top: -255px;">
<div class="page_hl pd_5" id="galtabs">
<a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal1">1</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal2">2</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal3">3</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal4">4</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal5">5</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal6">6</a> </div>
</div>
<div class="clearit">
</div>
<div class="clearit pb_10">
</div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(4000)
</script>
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-_ZEAo0OVDP4/TvzO8LGCdbI/AAAAAAAAAF8/0cS-zTHZ62I/s1600/woman-drinking-water.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Drinking 8 Glasses Of Water A Day Is ‘Nonsense,’ Doc Says</a>
</div>
<div class="summary">
The health recommendation to drink six to eight glasses of water a day is “thoroughly debunked nonsense,” a doctor wrote this week in a commentary...... <a href="http://johnypaper.blogspot.com/2011/12/drinking-8-glasses-of-water-day-is.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal2">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-jix-0-LKBeY/Tv1Xj1a0TPI/AAAAAAAAAGI/YdT9M9yyLhs/s1600/watermelon_slice.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">What to Eat to Beat Skin Cancer</a></div>
<div class="summary">
You got the pale-is-the-new-tan memo years ago and have the sun smarts to prove it. Skin cancer is the most common cancer in the United States, and women age 39 and under have a higher....... <a href="http://johnypaper.blogspot.com/2011/12/what-to-eat-to-beat-skin-cancer.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal3" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-ZjafkrVQpPg/Tv1XlJTtLxI/AAAAAAAAAGQ/kolxM1NCKv4/s1600/floyd-money-mayweather-415x301-1.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Get in Fighting Shape with Mayweather and Mosley</a></div>
<div class="summary">
Floyd Mayweather was dressed in a nice suit, standing on a stage in Manhattan in front of journalists and fans. His soon-to-be opponent Shane Mosley, was equally..... <a href="http://johnypaper.blogspot.com/2011/12/get-in-fighting-shape-with-mayweather.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal4" style="display: none;">
<div class="h250">
<img alt="" src="http://2.bp.blogspot.com/-0yMJYPvnpfI/Tv1Xl_EbrlI/AAAAAAAAAGY/ha44RdLAoE4/s1600/India-doesnt-let-blasts-derail-Pakistan-talks.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">India doesn’t let blasts derail Pakistan talks</a></div>
<div class="summary">
India brushed off speculation tying the Mumbai bombings to Pakistan and said Friday it remained committed to recently renewed peace talks with its rival neighbor. The moves showed how little......<a href="http://johnypaper.blogspot.com/2011/12/india-doesnt-let-blasts-derail-pakistan.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal5" style="display: none;">
<div class="h250">
<img alt="" src="http://4.bp.blogspot.com/-t5-_jkUlhWU/Tv1Xn8mzP0I/AAAAAAAAAGg/Wb3apNMv5yo/s1600/Mexican-authorities-find-massive-marijuana-plantation.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Mexican authorities find massive marijuana plantation </a></div>
<div class="summary">
Hidden between tomato stalks, the Mexican army found what officials describe as the largest marijuana plantation in the nation, a top military official ...... <a href="http://johnypaper.blogspot.com/2011/12/mexican-authorities-find-massive.html">Read Full Post</a></div>
</div>
</div>
</div>
<div class="img400" id="gal6" style="display: none;">
<div class="h250">
<img alt="" src="http://3.bp.blogspot.com/-aM5ALuNLByo/Tv1XonbIqiI/AAAAAAAAAGo/WuZEntRhoMQ/s1600/President-Obama-and-Dalai-Lama.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Dalai Lama Visit: President Obama Meets Spiritual Leader, China Complains</a>
</div>
<div class="summary">
President Barack Obama held a White House meeting Saturday with the Dalai Lama, a fellow Nobel Peace laureate...... <a href="http://johnypaper.blogspot.com/2011/12/dalai-lama-visit-president-obama-meets.html">Read Full Post</a></div>
</div>
</div>
</div>
<div style="height: 255px; margin-top: -255px;">
<div class="page_hl pd_5" id="galtabs">
<a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal1">1</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal2">2</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal3">3</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal4">4</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal5">5</a> <a href="http://www.blogger.com/post-edit.g?blogID=7490537618574143540&postID=5854147809063596364#" rel="gal6">6</a> </div>
</div>
<div class="clearit">
</div>
<div class="clearit pb_10">
</div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(4000)
</script>
Kode Script untuk Label/kategori sidebar
Masukkan kode di bawah ini ke dalam kotak HTML/Javascript :
Ganti entertainment yang saya kasih warna biru dengan label/kategori yang anda inginkan. Perhatikan angka yang saya lingkari dari gambar di atas, angka 4 adalah jumlah kategori yang ditampilkan dan 60 adalah jumlah karakter huruf yang ditampilkan dalam satu judul, untuk lebih jelasnya anda silahkan baca tutorial cara memasang kategori tertentu dengan thumbnail. Oya jangan lupa dikasih judul widget, contoh : Entertainment
Mengganti kotak pencarian (search) adsense
Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style="float: right; padding: 0px 6px 0pt 0pt;"> )
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-960848xxxxxxxx:6v20u0t45ip'/>
<input name='cof' type='hidden' value='forid:10'/>
<input name='ie' type='hidden' value='iso-8859-1'/>
<input name='q' size='26' type='text'/>
<input name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/cse/brand?form=cse-search-box&lang=in' type='text/javascript'/></script>
<div>
<input name='cx' type='hidden' value='partner-pub-960848xxxxxxxx:6v20u0t45ip'/>
<input name='cof' type='hidden' value='forid:10'/>
<input name='ie' type='hidden' value='iso-8859-1'/>
<input name='q' size='26' type='text'/>
<input name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/cse/brand?form=cse-search-box&lang=in' type='text/javascript'/></script>
Mengganti Adsense di postingan
Cari kode ini, letaknya di bawah kode ini <div style="color: #333333; font: italic 12px Georgia; margin-top: 10px; padding: 8px 10px 8px 70px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9608xxxxxxxxxx";
google_ad_host = "pub-15562xxxxxxxxxxxx";
/* johny mu */
google_ad_slot = "7011292523";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
google_ad_client = "ca-pub-9608xxxxxxxxxx";
google_ad_host = "pub-15562xxxxxxxxxxxx";
/* johny mu */
google_ad_slot = "7011292523";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Mohon maaf sebelumnya, karena banyak sekali kekurangan dari template ini, saya memodifikasi lagi agar lebih dinamis dan mudah dipakai. Slider pada template ini dirubah menjadi otomatis, jadi anda tidak perlu lagi untuk memasukkan keterangan dan URL nya satu persatu, tinggal mengganti kategori yang ingin dimasukkan pada slider. Untuk keterangan lebih lengkap ada disini. Pengaturan kolom juga lebih tertata rapi. Saya menghilangkan kotak feedburner dan related post di bawah postingan, karena banyak sekali pengguna yang meminta untuk dihilangkan saja. Untuk selanjutnya Anda bisa download ulang link yang ada di bawah.
Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker pada template ini tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :
<script src='http://Download Disini.googlecode.com/files/ticker.js' type='text/javascript'/>
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Terakhir save templates
Note :
- If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
- And for Johny Portal, Download Disini and Johny Magazine user template, change this code (post body close to the header):Into :
#crosscol-wrapper{margin:0 auto;padding:0 auto}#crosscol-wrapper{margin:0 auto;padding:5px}
Kamis, 29 Desember 2011
Border Radius CSS Generator
Diposting oleh
ayo Indonesia
Buat para blogger atau siapa saja yang biasa oprek CSS pasti sudah tau tentang Border Radius. Nah tool ini mempermudah kita untuk mengetahui seperti apa tampilan radius border tanpa harus berkali kali melakukan preview pada object kita. contoh kode border Radius :
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
Cara penggunaannya cukup ketikkan skala radius yang
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
Cara penggunaannya cukup ketikkan skala radius yang
Rabu, 28 Desember 2011
DarkVi0 New Template 2012
Diposting oleh
ayo Indonesia
Huahhhh... Akhirnya kelar juga edit templatenya. Meski banyak masih kekurannya tapi setidaknya saya sudah puas dengan template ini :D. Berhubung ganti tahun jadi pengen ganti template juga, Dengan harapan semoga hal-hal buruk di tahun lalu berganti juga dengan hal-hal yang lebih baik :). Sebelumnya saya mau review dulu keadaan blog saya sebelum ganti template, Berikut screenshotnya saya jepret






