2011 | TenaneItworks: 2011

Tips Membuat Animasi Images Artikel Blogspot

Tips membuat animasi images artikel Blogspot yang mudah, simple dan works tenan. Animasi kali ini cukup sederhana saja, hanya menampilkan efek berputar dan membesar pada images artikel. Untuk membuat animasi yang lebih menggigit, agan bisa memodifikasi script CSS nya. Untuk membuat animasi sederhana kali ini hanya menggunakan script CSS3 memanfaatkan efek transform, transition, rotate dan translate. Jadi akan memudahkan agan untuk membuat efek yang lebih greged daripada ini.

Related Articles - Tips Menangani iOS 7 Bermasalah

Bagaimana, setelah melihat screen shoot diatas apakah sudah ada gambaran? pasti sudah ada yah, kalau ga ada, saya bingung juga mau jelasin seperti apa. :v Mungkin dengan praktik langung bisa lebih memudahkan pemahaman.

Ok, Begini langkah-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit HTML"
Gunakan CTRL+F, Cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS3 dibawah ini, dan paste tepat diatas kode ]]></b:skin>

.post img {
-o-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease;
}
.post img:hover {
-o-transform:scale(1.2) rotate(360deg) translate(0px);
-moz-transform:scale(1.2) rotate(360deg) translate(0px);
-webkit-transform:scale(1.2) rotate(360deg) translate(0px);
-o-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease;
}

Related Article - Tips Membuat Menu Dropdown Web Blog

Terakhir klik Save untuk menyimpan perubahan, demikian artikel tentang Tips Membuat Animasi Images Artikel Blogspot kali ini, semoga bermanfaat. :)

› Read More

Tips Anti Plagiat, Menonaktifkan CTRL+U Blogspot

Pada artikel kali ini saya akan membahas topik menarik yaitu tips anti plagiat, menonaktifkan / mendisbale fungsi CTRL+U website atau blogspot, agar artikel kita terbebas dari plagiat. Namun pada kenyataannya, usaha tersebut begitu mudah untuk dikibulin bahkan dengan fasilitas dari browser yang digunakan. Setelah menggunakan berbagai teknik seperti menonaktifkan klik kanan, menonaktifkan fungsi copy paste, tapi bagaimanapun itu adalah usaha, tidak ada yang sia-sia, mungkin dengan begitu banyak juga plagiat yang malas duluan hanya untuk men copy sebuah artikel.

teknik ini pun saya temukan dari blog sebelah, dan ini memang hasil copy paste tapi isinya artikel tentu berbeda hanya kalau ada script-script dan picture, baru saya full copas. :v jadi sebelumnya saya meminta maaf kepada para blogger yang merasa artikelnya saya copas, untuk masalah script dan picture memang saya full copy paste, paling hanya ganti nilai / variabel saja kalo script, karena saya belum sepenuhnya bisa membuat picture dan script-script seperti itu langsung dari otak saya. :)

Ok, untuk lebih memahami langsung saja kita praktik, berikut langka-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit HTML"
Gunakan CTRL+F, Cari kode </head>
Kalo sudah ketemu, monggo copy kode Javascript dibawah ini, dan paste tepat diatas kode </head>

<script src='http://yourjavascript.com/5277316191/donotcopasme.js' type='text/javascript'/>

dengan menyisipkan kode javascript diatas, ketika plagiat menekan CTRL+U, maka akan langsung diredirect ke halaman lain yang berisi picture Plagiat Detected, seperti dibawah ini:

Related Article - Tips Membuat Menu Dropdown Web Blog

Terakhir klik Save untuk menyimpan perubahan, demikian tips anti plagiat, menonaktifkan CTRL+U Blogspot kali ini, semoga bermanfaat untuk kebaikan website atau blog kita semua.

source: jam-vista

› Read More

Tips Menghilangkan Entri Atom dan Subscribe To (Blogspot)

Tips menghilangkan Entri Atom dan Subscribe To Atom pada Blogspot. Berdasarkan pada alasan-alasan blogger mengapa fasilitas Entri (Atom) dan Subscribe To Atom ini lebih baik dihilangkan adalah karena penempatannya yang kurang menggigit, tidak user friendly, sudah ada tools yang lebih baik untuk digunakan seperti feedburner. Sebelum memulai tahap eksekusi ala deportasi, sebenarnya apa sih fungsi dari kedua fasilitas ini? Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Posts (Atom) adalah fasilitas pengunjung untuk berlangganan post beserta komentar-komentarnya.

Related Article - Tips Membuat Breadcrumb di Blogspot

Ok, langsung saja kita masuk tahap eksekusi Entri (Atom):

Pastikan sudah masuk ke akun blogspot agan, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Gunakan CTRL+F, cari kode <b:include data='feedLinks' name='feedLinksBody'/>
Kalo sudah ketemu, monggo dihapus saja

Kemudian tahap menghapus Subscribe to: Posts (Atom)

Masih tetap di editor Edit HTML, jika sudah move on monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Gunakan CTRL+F, cari kode dibawah ini

<div class='feed-links'>

<data:feedLinksMsg/>

<b:loop values='data:links' var='f'>

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

</b:loop>

</div>

Monggo, Hapus semua kode tersebut

Demikian tips menghilangkan entri atom dan subscribe to (Blogspot) kali ini, semoga bermanfaat. :)

› Read More

Tips Membuat Read More Otomatis Blogspot

Tips membuat read more otomatis blogspot yang mudah, simple dan works tenan. Sebelum memulai seperti biasa untuk memperpanjang kata kita harus tahu dulu apa itu read more dan bagaimana cara kerjanya. Read more adalah istilah yang digunakan di dunia website dan blog yang digunakan untuk membatasi tampilan artikel pada halaman utama atau homepage umumnya, dan pada halaman kategori serta halaman hasil pencarian khususnya. Tanpa adanya read more ini, semua artikel yang ada akan terbuka di halaman-halaman diatas yang menyebabkan website atau blog menjadi memanjang, kurang menarik, kesannya seperti web blog satu halaman.

Related Artikel - Tips Membuat Social Media Share Artikel Blogspot

Ok, untuk lebih memahami langsung saja kita praktik, berikut langka-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Gunakan CTRL+F, Cari kode </head>
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 250; img_thumb_height = 100; img_thumb_width = 100; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian gunakan CTRL+F untuk cari kode <data:post.body/> atau <p><data:post.body/></p>
Jika kode tersebut lebih dari satu maka replace kode yang pertama dengan script dibawah ini

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kemudian klik save untuk menyimpan perubahan. selanjutnya kita bongkar dulu maksud dari kode javascript diatas:

summary_noimg = 500; Jika artikel yang bersangkutan tidak memiliki picture maka yang akan tampil pada halaman depan adalah textnya saja sebanyak 500 huruf
summary_img = 250; Jika artikel yang bersangkutan memiliki picture didalamnya, maka yang yang ditampilkan adalah picture itu sendiri dan text sebanyak 250 huruf
img_thumb_height = 100; Tinggi picture yang jadi thumbnail di homepage
img_thumb_width = 100; Lebar picture yang jadi thumbnail di homepage

Nilai-nilainya bisa diganti sesuai kebutuhan agan sekalian, kemudian untuk icon read morenya jika kurang cocok, agan tinggal replace URL yang dibold itu dengan URL icon milik agan, atau bisa langsung cari inspirasi di Google Image.

Related Artikel - Tips Membuat Breadcrumb di Blogspot

Yap, Demikian tips membuat read more otomatis blogspot, semoga bermanfaat. :)

› Read More

Tips Membuat Breadcrumb di Blogspot

Tips membuat breadcrumb di blogspot dengan mudah tanpa ribet dan works tenan. Tapi sebelumnya kita kenali dulu apa itu breadcrumb dan apa fungsinya? Breadcumb adalah salah satu navigasi website atau blogspot yang sangat penting, mirip seperti menu tetapi cara kerjanya searah dan runtut mengikuti kehalaman mana pengunjung berhenti dalam arti breadcrumb selalu mulai dari hompage, kemudian kategori, sub kategori, tanggal sampai ke artikel yang dituju, ini memberitahu pengunjung sedang berada di website atau blog bagian mana dan memudahkan pengunjung dalam mengunjungi halaman yang pernah dikunjungi sebelumnya tanpa harus mulai dari homepage lagi.

Ok, Begini langkah-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

.breadcrumbs { margin:0; padding:5px 5px 5px 0; font-size:95%; line-height:1.4em; border-bottom:4px double #a0a0a0; }

Tips Membuat Social Media Share Artikel Blogspot

Kemudian cari kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> Cari yang dibold saja untuk memudahkan pencarian, dan pilih yang pertama jika lebih dari 1. kodenya agak panjang karena saya menggunakan template bawaan blogspot mungkin di template lain berbeda, tapi yang di bold pasti ada kok. o ya, dalam mencari kode jangan lupa gunakan CTRL+F ya. :v
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat dibawah kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>

Tampilan breadcrumbnya tidak sama dengan yang digambar, karena itu hanya contoh saja. Agar sama seperti digambar agan harus berkreasi di bagian CSS nya saja. Dan akhir kata, demikian artikel Tips Membuat Breadcrumb di Blogspot kali ini, semoga bermanfaat.

Related Artikel - Tips Membuat Pagination Atau Page Number Blogspot

source code: maskolis

› Read More

Tips Membuat Menu Dropdown Web Blog

Tips membuat menu drop down untuk website atau blogspot, sebenarnya sih tidak harus dropdown, menu juga tergantung kebutuhan sih. Untuk masalah menu biasanya sering berganti-ganti seiring perjalanan web blog agan, kadang tidak pakai dropdown kadang pakai juga. Nah, Pada artikel kali ini sengaja dibuat dropdown untuk mempermudah agan jika mau menggunakan kedua jenis menu tersebut, begini untuk kemudahan di kemudian hari daripada nyari lagi kan kesien :v , jika menggunakan script dari TnT kalau agan ingin menggunakan menu tanpa dropdown, nanti tinggal edit di bagian HTML saja, karena dropdownnya sudah di handle di script CSS nya.

Struktur menu dropdown dibuat dari HTML yang di stylize sedemikian rupa menggunakan CSS, kadang ditambah juga dengan Javascript agar lebih responsive. Coba perhatikan kode HTML dibawah ini:

Related Artikel - Tips Membuat Read More Otomatis Blogspot

<div id='navi'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

kode baris ketiga <li class='active'><a href='#'><span>Home</span></a></li> adalah menu tanpa dropdown sedangkan baris keempat sampai baris kesembilan adalah menu dengan dropdown, ini dibuktikan dengan adanya tag <ul> didalam tag <li>, selebihnya diatur pada script CSS nya apakah mau dropdown kebawah, keatas, kesamping, termasuk designnya juga. class='active' dan tag <span></span> adalah optional tergantung kebutuhan saja. Nah, jika ingin menu tanpa dropdown, agan tinggal hapus tag <ul>...</ul> didalam tag <li>...</li>, tapi kalau ingin menu dengan dropdown agan tinggal tambahkan tag <ul>...</ul> didalam tag <li>...</li>.

Ok, Implementasinya sebagai berikut:

Pastikan menu diatas sudah cocok dengan yang agan butuhkan dan Pastikan juga sudah masuk ke akun blogspot, jika belum monggo login dulu. :)
Pilih menu "Layout"
Diarea Layout, dibawah (Header) pilih "Add a Gadget"
Akan muncu window baru Gadget, pilih HTML/Javascript
Paste kan kode HTML diatas di gadget tersebut, lalu klik Save
Kemudian pilih menu "Template"
Pilih "Edit HTML"
Gunakan CTRL+F, cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

#navi ul {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(overlay.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#navi li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#navi a,
#navi a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#navi a:hover {
background: #000;
color: #fff;
}
#navi .active a,
#navi li:hover > a {
background: #979797 url(overlay.png) repeat-x 0 -40px;
background: #666666 url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#navi ul ul li:hover a,
#navi li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#navi ul ul a:hover {
background: #7d7d7d url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#navi li:hover > ul {
display: block;
}
#navi ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#navi ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#navi ul ul a,
#navi ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#navi ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #navi ul {
height: 1%;
}

Related Article - Tips Membuat Breadcrumb di Blogspot

Demikian tips membuat menu dropdown web blog kali ini, semoga bermanfaat. :)

› Read More

Tips Membuat Social Media Share Artikel Blogspot

Tips membuat dan memasang social media untuk share artikel di blogspot dengan mudah, simple dan works tenan. Ada banyak cara yang bisa kita gunakan untuk membuat social media share tersebut baik manual maupun otomatis. Social media share button adalah tombol-tombol yang digunakan untuk untuk berbagi artikel tertentu ke social media facebok, twitter, google+, linkedin, dll.

biar lebih menggigit, saya akan share 2 cara memasang social media share di blogspot baik manual maupun otomatis.

Kita mulai dari yang mudah dulu yah, dengan cara otomatis bisa dengan bantuan addthis dan sharethis, dalam post blog saya ini, saya pakai yang addthis. Caranya hampir sama kok, tinggal kunjungi situsnya, kemudian registrasi lengkapi form yang ada. kalo sudah sampai tahap instalasi tinggal copy scriptnya dan paste di blog agan.

Tips membuat dan memasang social media untuk share artikel di blogspot

Jika agan males untuk register, maka ikuti langkah berikut:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Cari kode <div class='post-footer-line post-footer-line-1'>
Jika ada 2 script seperti no 5, maka pilih yang ke 2, yang berarti penempatan social media share ini berada dibawah artikel, (contohnya lihat di blog ini, dibawah artikel ini).
Kemdian, monggo copy script HTML dan Javascript dibawah ini, dan paste tepat dibawah kode <div class='post-footer-line post-footer-line-1'>

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_linkedin_counter"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>

Jika memilih cara manual, agan tinggal ambil plugin yang tersedia di situs developer social media yang diinginkan. Shortcutnya langsung saja ke Facebook Developer, Twitter Developer dan Google+ Developer. Setelah dapat scriptnya, kemudian ikuti langkah-langkah diatas jika ingin penempatan social media sharenya seperti blog ini, jika tidak agan mungkin bisa nyisipinnya setelah atau sebelum kode <data:post.body/> yang ke 2.

Demikian tips social media share kali ini, semoga bermanfaat. :)

› Read More

Tips Membuat Pagination Atau Page Number Blogspot

Tips membuat pagination atau page number blogspot yang mudah, simple, dan works tenan. sebelumnya, kita harus tahu dulu apa itu pagination atau page number? Pagination adalah istilah yang digunakan untuk membuat penomoran halaman blog atau website agar pengunjung lebih mudah mengekplorasi semua artikel di blog kita.

Kenapa blog atau web perlu dikasi page number? tentunya jika blog tidak diberi pagination maka, blog anda akan memanjang tanpa ada ujung, membuat pengunjung capek untuk menscroll sampai bawah, terus naik lagi, nanti kalo jari si pengunjung lecet, yang mau mijetin siapa? kesien kan.. :v.. oleh karena itu anda menggunakan blogspot, secara default paginationnya kan hanya menggunakan "Older Posts" dan "Newer Posts" saja, sangat tidak menggigit beuds kan?

jadi bagaimana jika tampilannya seperti ini:

pie, cuit cuit.. kueren beuds kan. :v tapi dari script yang saya share ini, tekstur tampilannya tidak seperti di atas, tapi fungsinya tetap sama kok, makanya dicoba dulu yah. :v kalo mau seperti diatas, bisa menggunakan UI kits atau dari CSS nya aja.

Ok, Begini langkah-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ddd;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ddd;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

6. Setelah itu, cari kode </body>
7. Kalo sudah ketemu, copy kode javascript dibawah ini, dan pasti tepat diatas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=7;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

8. Simpan perubahan yang dilakukan dengan klik "Save Template"

Demikian topik pagination ini, untuk menjadikan UI nya lebih menggigit, kembangkan kreativitasnya pada script CSS nya. semoga bermanfaat. :)

› Read More

Labels