Popular Posts

Diberdayakan oleh Blogger.

Sabtu, 31 Maret 2012

6 Questions to Ask Before you Start Blogging

Start a BlogDo you want to be considered as a serious player in the blogging market? Are you a novice blogger to understand the technical glitches? Do not worry and blogging is not a difficult thing. It has become the mainstream form to express the individual and communal thoughts. It is proven to be one of the best ways to conduct your business online. Several companies and brands are trying to establish their online presence and get noticed. There are more numbers of people interested in finding out informative blogs and regularly visit them to gain knowledge. Do you know that there are about 150 million domains active in the internet domain?


Questions to be asked:

Why should you blog The first and foremost thing is to clarify your purpose of blogging. Why should I blog? What is the purpose of blogging? These questions should be answered before you set up your blog. It is important to set up realistic goals before you start any task. Many people fail to plan which will ultimately lead to failure at the day end. Setting up realistic goals and identifying the purpose will help you to gauge the results and performance.






target audience Who am I targeting? So, who is going to listen to your blog posts? Have you identified your target audience? You can gauge the results only by identifying the right set of audience and getting in touch with them to listen to their feedbacks. These people will be receptive to your posts.





what is your niche ? What am I going to tell them? So, what is the information that you wanted to spread? What is the intention behind your blogging spirit? Do you have anything useful which would benefit your readers? These questions will help you to identify your purpose of blogging and bring in more number of online audience.






different blogging platform What is the platform? Have you decided about the platform to be used? There are so many open source blogging tools available. Have you picked up the right kind of tools to be used and integrated with your platform? It is important to be able to sustain in this blogging industry. Unless you choose the best platform, it is highly impossible to continue posting.






Blogging Frequency to Leads gained How many posts should I make? Most of the bloggers will publish their first post without finalizing the theme and context of blog. They randomly choose topics and fill up the information. It is considered as a blunder in the internet domain and people will often be confused with your posts. It is important to have a plan or a good strategy that will help you to accomplish the goals.


how to promote your blog How am I going to promote? Do you want your blog to be a popular online portal? Do you want a good number of visitors’ every day? It is important to work on things which will make your blog notified in the internet domain. It requires a lot of patience and commitment from the blog owners. Understanding various metrics to promote your blog is an important aspect here.








Make sure to understand the above described points which will help you to accomplish your goals in blogging market.


Author Bio
This is a guest post by Rajkumar Jonnala who is an expert author in churning out articles based on server rack, network cabinets etc. He also gives valuable suggestions on reliable brands, cost and quality factors on rack cabinets.

Description: 6 Questions to Ask Before you Start Blogging Rating: 4.5 Reviewer: Unknown - ItemReviewed: 6 Questions to Ask Before you Start Blogging

Jumat, 30 Maret 2012

30 Custom 404 Pages for Blogger

404 page
With Blogger introducing the option for Custom 404 Page for blogs recently, its been a much welcomed feature. A separate page type has also been created to give more control over these 404 pages. This feature is only available for New Blogger Interface nearly marking the end of the Old Interface (Its being officially shelved on 1st April ). Firstly we will be discussing how to use this feature followed by the collection of 30 witty 404 pages designs.


Steps for using these awesome designs on your blog

1. Go to Settings > Search Preferences

2. Under Errors and redirections , Edit the Custom Page Not Found option

3. Now copy the specific code under the images below and then paste it there

Tip: Make sure give your 404 page a witty title as well. Blogger has introduced a new page type specially for the 404 pages known as the Error Page

Go to Template > Edit HTML and paste the following code just after the <head> tag

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>You've ripped a hole in the fabric of the internet. </title>
</b:if>

Feel free to change the title as per your wish


Collection


1.
oops error 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhso82EooI3HtLJMDGOS1SqVa4uzGjxAwmMH_k812t7F4-Awq3gEkiqfQ6h1-MDTH4rncwPseDM_mpppp1vUVG4x5mFcZ1E6LbKp9nO9K_TGqGjQvmHjYm3hlGniKTPLLt1i0255O_6Fkw/s1600/1.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

2.
there is a problem and somebody is fixing it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfKnrIDxmNUzTyPTuidVvBmEwt7_WDZ-gf9FN-54ldbm6RGThCLopomOZ0EJWPj9J1TtN5vVAdIsOIi7uT1cMRsr3-cklUeX2MWvaK0kwAHev0HqElp80CFVfnq691EdPxF3NRMyALKML/s1600/10.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

3.


Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5epEfNodEklSft1yaV5d86Qdb00ybsLPi6QT4UNjzla0CiNsa9SIX-ae36Ffp4M5Z7MiRmMblkra2mn1ElXeA3SwP-Djqd-8lb_bJYivjuOO6pZsViiC7QnC6aBHjlxDaCcAUDh5J5MkD/s1600/404.jpg') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

4.
page cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXf7WUGv3R_kTLDozHQfD2oBYaDSMJM6b8Q2ccD8kTKe4KS0pbt7d5Jml47Bz64U-G2XzhYRcpCh5KgjYXIQ5tgFs8FYMlbC-y-ysWInCvPpiOzQSJvZAQMjLKFS0aQC9qYK-H18mXWOa/s1600/11.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

5.
oh no we couldn't find 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfWtDd21B7H5pZ7YgvnPhJZKN09yYlNET-4Xz4ZgwI3dpPfqwOMqCu7uj7mrR9rJto5kxsq73tvPlnonjwEtPVI1YIvKBfCjkjlR9Mbf_TeunaeJQ5ekvMj7944EQzplBzQ7Jntc6KFwt/s1600/12.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

6.
web page required to apply call 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-C95wor2aqc8sUjTHZHI5DABaHgGqA1e0SuIZOZ9DkHvJj4QGf1L0kwdeoLa3W-okuf93lismYXQeIGulpi8cRvSTHsHNowkmFtfERIChvfwuC5AkQUJR4cCyqtDsFIapVMa2HiOqvcCJ/s1600/13.gif') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

7.
error 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPtWdjyhvtEAJzwlIzXO-IsYSCeEK9t8Yu0K0dYXipnqhc06Az4ENgXBf5Ryd_uvx6rpT-nUuY1MGarZkbqq2NBbeIPAWR4nhmlgHHGobatxOhpijQY9RiXfSASoblf2oJV18SAf2IbLK/s1600/14.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

8.
{404}

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm170SYNDoByoq61spYgXaBobBTMENfikg_uaMTKZbuXxAuJCFm2RM_XQ2ucxnzxyEJz6Vn0cefQCP5JFhjTxZNfMYcE2ft8xVvABScmeZMgu_RSh4oK42u7jcPGTE32qXcw9glmRjFYNI/s1600/15.gif') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

9.
404 page not found because i ate it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB6gjrikpa6GAugn40_X6ssFkdexQli-xyEu9JNgAINCgiXj6Mcb8P0thQ0ZPkfBj16qnAaIjH3JfXPheE-rq0OPQc-j6m_A4TZxnTTN922loBjcbAdJSmCXABS4bfx_JudHjoe1CJkk2D/s1600/16.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

10.
404'd file not found , in closing go away

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gVX_gSyUazA8qjY8shRlZCbM27tPRnUUomRtA_a_I-VYpKq4E-HXQHPUcVjXygMhjqVmvFH9KV97M5dfGCQ9GjktJ_BTFZO_uZWWeevQeiiiWKGIaCmUab25KYmUSfvmB89MkEYqH_Qe/s1600/17.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

11.
cannot find target server file

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZhvBLShzTHY58z1o0_2yTfryrgC6-6FMZc16VYn8R4m0HMmeP94JzITgI0c4yjpoCF8HCUjU87ozsoW4cI9qy4qcEmeb7tT8CL9nDZKTOVly9OraeFgD4M5wGS2Wnt56T0GWDelolq1N/s1600/18.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

12.
404 error ,the page you are looking for does not exist ,go back friend

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUd56_Z6k_vj-fUZKcxQRPFyTkm5JfyZ_A1D23KIkVKi4c8j4T8J0Ur_ndUIjz1oLZJoPGrqtYTjrxshCwgiFD6s1o6GwnTZjrlW605S2BJkINnFAuiOslFU1kK9pGGuiuW6SWSBKDwUzX/s1600/19.png') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

13.
404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMezfdIe-Nzr89q4c8j8uahgYDmywmgfLdgkMJSQlT7p3PAlHkR1WDWdmtsxXEgJTF6aUSDHWRlJvzjccUA4UCA5787EhTge8jq0Ja5S13VfvMT2BJFeUIYxzDmRrcuOJGcbBpwUP0HGz/s1600/2.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

14.
page not found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0N4bxuzaQZoisyjdHgFoaQKEkkXhstdO1kj9t6YA97FBG0Jmsp9KDfI9nP5P7fDGMMM5F26M9mHtcKxgMI7EfQrjY1xX36nxR6TmVGwX1tDtP3i-pIyxvY-tAQL7IEB6BFT1saVvy16a4/s1600/20.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

15.
404 error eaten this page

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhif0QQxeM5XXexl3nScbb0A_IEvcsAmg01dGypI2u0W-xLMtQ2BzdYd8ZDdHWk7UNFrBM40ydl3C837FPx1Kwc0Zm1RTho-N4eq4iuqlaiTeKUSmd3gEnMO3hWdhX90Q1ktR5bzpkw_PmB/s1600/21.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

16.
something gone horribly wrong

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOdQdyFeX2lZtslpVqmfZjeePXJ7XrodB7qD2l8h-rySGtQNiC4fYQLpTTBQt7Lqu-T54JnBh1_3OGdeWBbWyzS3nQrHfLX0XKiNrLRHJVJZzig1yA42Gl4Z9VspnZT7IAuRFItTeONCo/s1600/22.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

17.
404 forget it

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNFtPmrSPUodaXKJqZlDuxBgrwPQrGDYysmCZwO-ZWJhir5LwSr0r70h7oTuRedBpDOgVIDxoNp6EWWI9u-a4qJ1BHk7qcnBh2NVr6wESKcy03VYBa5jpj3fXCcpwOPlXyEUyXMigS8QC/s1600/23.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

18.
404 internal server error

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-9FidM69U__h1Tn7ELDt8a5pSM_j0N-rVSobGjwUfONnVOGKi-9N5lOcFXMBdzPkeE3CyCGrQLq7waLWvDdAvT_dvphvJdV4mPIPn8XYn4nS0blPZ58-KWImHe_6EMs1b2V78bnqEDWI/s1600/24.jpg') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

19.
file not found trust us we looked everywhere

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqiDhAYJ7f_sEOjmdkAObZ7URRPZYUFZvly7qKQejjNdFC8-EK4tuiKo6zlSAOK6K7ZIGWFbPkLWUF2p7z6ATXOYRlKwpKvZNI1RHj4gz19aGIbhH39vTw79txh0gG1PqoJvA_Oj3C6Ktb/s1600/25.jpg') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

20.
what the ?

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRn7caSws9GD-7JF_RpMGPWwcWC3zDdqGoXYfKxZyybPHe7vw8RPZ-KU7kficBvbDqWJ0obcSNOfvf-aR4IUjbhlrYImQeWq-CKHptatspcnFtn2IANOEm-L7noRC3WN7hlw64LtlyPvON/s1600/26.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

21.
sorry i may have shreaded the power cord

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWrQSc0ict0ZhtT-EfPaWw-Jb3DxzfA3f7ub1A0c5kZgE1FtunO6xmcFlHFCdVBrARE90C89xcmCkGRmzjBy2PBWVxubD85Ebs9Lr_VPDyEpSypQz82jUp4K_IgX0giaWr3ptHxMVcx9R-/s1600/27.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

22.
404 page no more kidnapped

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0P8XozjF2AidG0dIj0wC1m1Kb8S1L0WMnWZGCh9Zc64seAxcKwoqQG90Oe4uSI1OEeDmvhITKWZleabZACvgfWn3Z0d9oJFAFjrGI6XLUdlum7QL9NjLdIuc-23xPGV2IpJQS7umFkfqi/s1600/28.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

23.
truth behind the 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdq4ZNsSW9FyrlgaEe0kU8yb6ZHhYd97TN6i6rhFqN1IVwOhnLPD-RHnq_nh8ghIAqS1zs0QhGlxg00jXDiw2cd5AVUSiFowWhVhluC5fOT6G1AGyZsPz9XltQdLS6UFXSPcmmkZBkLU2/s1600/29.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

24.
404 this is not the web page you are looking forCode:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2ZqhzHUsOjrajKVHCmGaoty9xHDWBYofbpbEYpK5b6s2XuiOgpY4fpqXVE1DT02UtQQy6l_BUM8VCOzUxFFWOqUg-WocXbrlNTf9Kgn5SK78gODLoHIr1AnDyxKRD4Fa3nYOzbFlP-C_/s1600/3.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

25.
the page

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXEPjxKId_e-HAJu_hQXZhUI1LlPWcHjddcXj01-2ZohcugIzI-C1Nl6iNaGl10hzim2MzYFqPN5kCg1eJsRbNYX6ybueXGqHw_cxk_rblgGZzNGxlxOSstT9a4ItSp12KKGgQyvdTcmZ/s1600/4.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

26.
202+202 404

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsN6xZC1YdFE1Yu9ZRJjeTDouJOiju5pLch83ymZXX3SpPxmfqCYbFFP8jRAyUnxykwFiwVBJ3BgtqkpbOlNnWKIQtIwvgioMgRGIhfQBqEqDy4vEujMeXxh8BXx0tDGw1aBgHwiUvwhop/s1600/5.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

27.
uh oh that page can't be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2c5ozZAt3QUOOjDsud0utmABCY7wUg7e7p2arVXEuJbPyMe9nzg63l9yb-lhDQ1lRbtQJz9PGSq5-CqG07C_Uz85dfHuexUiga1cvLE-GeGK0ttMR7FW2knpkloAxQi0U541jkj3vEL8/s1600/6.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

28.
we're sorry the page you are looking for cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgigKR-jmUCZzbxZ5F8kSD_kIukq5TfmwMw0kEKP02X_FL3O3IIQTXx1nJG2m80EzVimOKwEBFYcVpW5nUefFWd6Ec_RghsIvb4J4T5UaHKSCM9ayXbeTDPjdXsv8SzUyDcK07s_7Tx1NiO/s1600/7.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

29.
404 we the hell are we you feckless lummox

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHhMwxxIo7IWArW5IuYv129t5ZOdZJnApYCe0Qwit5cz1_cO_kxfrXBecs0NIjGjfMg0CQcSnOEefy0wJ_-ToI_9s8xKlViR_NpFBsJRJ3QSJjGMDsRx8bsqYD1AuRD_QuqZrL-Y7dGD4m/s1600/8.jpg') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

30.
oops, this page cannot be found

Code:
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmm_FIZnEJ9amwMfElUjt6LCicscCTsbftY8RHRt8_dRKZv057rTSWrFbg1Hrbs1a-bXa-MhB2wDfBrs1eH6-Z7ny6hDv6jx94e4gHLARqjx18wCi2Ul8zugpL3MZ3ZFAWRG6xcS_SM7k0/s1600/9.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>



Do remember to check the 404 page of SYB and share any other 404 design of your liking via the comments below. Description: 30 Custom 404 Pages for Blogger Rating: 4.5 Reviewer: Unknown - ItemReviewed: 30 Custom 404 Pages for Blogger

Membuat Static Page pada Template Magazine

Postingan kali ini saya tulis khusus untuk pengguna template blogger magazine buatan saya dan mungkin bisa juga dipakai untuk template lain yang tampilannya magazine. Banyak sekali yang bertanya lewat kotak komentar maupun email tentang bagaimana menambahkan halaman statis (static page) pada template tersebut. Mohon maaf karena kesibukan di dunia nyata saya tidak sempat bereksperimen untuk menambahkan fitur static page, baru sekarang saya mengutak-atik template dan menambahkan statc page pada template-template magazine tersebut.

Tutorial membuat static page pada template blogger style magazine ini sudah saya coba dan terapkan disini, dan yang jelas pasti akan saya bagikan penemuan saya ini kepada para teman-teman blogger pengguna template magazine. Oke langsung saja pada cara pembuatannya :
  1. Langkah awal login ke blogger dengan Akun anda.
  2. Masuk ke Template kemudian klik Edit HTML
  3. Jangan lupa untuk mencentang kotak expand widget templates, dan untuk berjaga-jaga backup dulu template Anda.
  4. Kemudian cari kode seperti dibawah ini, letaknya dibawah ]]></b:skin> :
    <style type='text/css'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    #main-wrapper {width: 370px;padding-left:10px;}
    h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}
    .post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcbQaF2m4DjPW5pJH2LV1_x3-oT9o45S6fUgvUAOmzU6bzzMsv-uO3z7iaBuRUYx2jyxR10ZE84bumlu6rFZ1MIr0GsDmAJ088oCwFzBj6buKymsJaTzI5ZQplt0kksO7bAN8Y_2q6W8/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}
    .post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}
    .post h3 strong, .post h3 a:hover {color:#FF8000;}
    .post {border:none}
    .post {border-bottom:1px dotted silver;margin:0px;padding:0px;}
    #blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}
    </b:if>
    </style>
  5. Yang harus Anda perhatikan adalah kode diatas yang berwarna merah, kode lain (yang berwarna hitam) berbeda-beda tiap template. Ganti kode warna merah dengan kode berikut :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>

    ...................................
    ...................................
    ...................................
    </style>
    </b:if></b:if>
    Sehingga susunannya akan seperti ini :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    #main-wrapper {width: 370px;padding-left:10px;}
    h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}
    .post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcbQaF2m4DjPW5pJH2LV1_x3-oT9o45S6fUgvUAOmzU6bzzMsv-uO3z7iaBuRUYx2jyxR10ZE84bumlu6rFZ1MIr0GsDmAJ088oCwFzBj6buKymsJaTzI5ZQplt0kksO7bAN8Y_2q6W8/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}
    .post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}
    .post h3 strong, .post h3 a:hover {color:#FF8000;}
    .post {border:none}
    .post {border-bottom:1px dotted silver;margin:0px;padding:0px;}
    #blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}
    </style>
    </b:if></b:if>
  6. Masih pada posisi Edit HTML, scroll jauh ke bawah temukan kode berikut ini :
        <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
    <div id='artikel'>
          <data:post.body/>
    </div>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  7. Kode yang saya cetak tebal diatas, tiap template berbeda-beda, setelah ketemu ganti dengan kode di bawah ini :
        <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  8. Terakhir Save Templates, langkah membuat static page selesai.
Sebenarnya sampai pada langkah ini static page (halaman statis) pada template Anda sudah muncul. Tapi biasanya widget yang ada di tengah atau disebelah postingan terbaru akan nampak pada halaman statis. Untuk menghilangkan widget tersebut dari halaman statis ikuti langkah di bawah ini :
  1. Pada posisi Edit HTML (centang expand widget templates) cari dulu ID widget yang ikut muncul pada halaman statis. Di bawah ini adalah contoh dari ID widget (perhatikan kode yang dicetak tebal)
    <b:section class='sidebarleft' id='sidebarleft' preferred='yes'>
    Sebagai contoh saya ambil dari template Johny Simple Magazine 2, widget Adsense dan World News mempunyai ID : sidebarleft
  2. Setelah itu cari kode <div id='sidebarleft-wrapper'>, kemudian tambahkan kode berikut ini diatasnya :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  3. Scroll ke bawah sampai Anda menemukan kode </div> penutup dari <div id='sidebarleft-wrapper'>. Kemudian letakkan kode </b:if> di bawahnya sebagai penutup. Susunannya seperti ini :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div id='sidebarleft-wrapper'>
    ........................................................
    ........................................................
    ........................................................
        </div>
    </b:if>
  4. Jika Anda ingin format timestamp tidak tampak pada halaman statis, cari kode di bawah ini :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span class='post-timestamp'><data:post.timestamp/></span>
    </b:if>
  5. Ganti dengan kode berikut :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span class='post-timestamp'><data:post.timestamp/></span>
    </b:if>
    </b:if>
  6. Terakhir Save Templates, langkah membuat statis page untuk template magazine sudah selesai dan lihat hasilnya.
Langkah-langkah diatas saya khususkan bagi para pengguna template magazine buatan saya, seperti Johny Simple Magazine 2, Johny Magazine, Johny Magazine 2 Light, Johny Portal dan Johny Portal 2, Mas Paper Template, Johny Papers Magazine. Silahkan Anda coba dulu jika masih ada kesulitan bisa ditanyakan lewat kotak komentar yang ada di bawah. Demikian tutorial singkat kali ini, selamat mencoba dan semoga bermanfaat.
Description: Membuat Static Page pada Template Magazine Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Static Page pada Template Magazine

Rabu, 28 Maret 2012

Membuat Related Post Thumbnail dan Kotak Feedburner

Artikel ini menjawab pertanyaan beberapa teman blogger yang ingin membuat fitur Related Post Thumbnail sekaligus dengan kotak Feedburner. Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Sebelumnya saya juga pernah membahasnya pada tutorial menambah dua kolom di bawah postingan, tapi hasilnya terlalu sederhana dan mungkin kurang menarik bagi minat pengunjung untuk berlama-lama di blog, apalagi perkembangan blogger sekarang ini, banyak sekali tutorial baru dengan menggunakan jQuery sehingga blogger menjadi salah satu CMS yang tidak bisa dipandang sebelah mata.

related post feedburner

Sebenarnya saya masih pengin berlama-lama ngobrol ngalor ngidul, tapi karena nanti malam ada pertandingan bola antara Barcelona versus AC Milan mesti cepet-cepet tidur biar bisa bangun nanti malem. Oke langsung saja, saya akan berikan tutorial untuk membuatnya, contohnya seperti gambar diatas demonya bisa dilihat disini di bawah postingan :
  1. Pertama Anda mesti login ke blogger dulu
  2. Kemudian klik Template > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan.
  4. Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
    #related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
    ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
    #related .related-posts{font-weight:400;width:50%;float:right}
    #related .related-posts p{margin:0}
    ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
    *html ul.rp#related-posts li{margin:0 13px}
    ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
    ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
    ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
    ul#related-posts li img{bottom:0;padding:0!important}
    ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
    #related .subscribe{width:43%;float:left;color:#bdbdbd;}
    #related .subscribe p.intro{font-weight:400}
    #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZqKcPc_V7od8-xVTs9gJK9rzc88X3IeHXJf7vwuWwl0s0zPbmYdaY8PMJbKJaaW-c9uSF6vy-qb5406_dBiXgwgH3AqZDiM9xuwQb2H8HZ79oeqhDRZPu0J_PoO1BISa-NlH9j5DmKY/) 0 50% no-repeat;vertical-align:middle}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
  5. Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='clearfix' id='related'>
    <div class='related-posts'>
    <p>Related Articles</p>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwyNZtH2LbOEiQKG9aRcpwyWiUxnEyigQF6efjPdU7JRt1hJ7fSomVC6QUcuXYTYjFtniU2zqsdkXv8Uv5E0un6dk1pMSKw0FVTMoOEtXXCl7hBmCgHESlMwF2ZycbzS8qNwIDdWqjdE/s1600/no+image.jpg&quot;;
    var maxresults=6;
    </script>
    <script src='https://masolis-javascript.googlecode.com/svn/trunk/related.js' type='text/javascript'/>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
    </b:loop>

    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>                
    </div>

    <div class='subscribe'>
    <p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
    <b>click here</b></a>, or subscribe to receive more great content just like it.</p>
    <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='JohnyTemplate'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
    <input id='botsubbutton' type='submit' value='Submit'/><br/>
    <small>Your information will not be shared. Ever.</small><br/>
    <a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
    </form>
    </div>
    </div>
    </b:if>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
    Warna merah : ganti dengan URL anda.
  6. Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.
Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.
Description: Membuat Related Post Thumbnail dan Kotak Feedburner Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Related Post Thumbnail dan Kotak Feedburner

Senin, 26 Maret 2012

Cara Daftar di Technorati

Pertama jangan kasih komentar untuk artikel ini ya, ini hanya artikel agar diterima di Technorati dengan menyertakan claim token dari situs itu dan kalau sudah keterima lagi paling juga saya hapus post ini. Daripada nanti isinya cuma kode claim token aja mending saya repost tulisan ini. Dulu waktu blog ini beralamat http://www.maskolis.co.cc sudah keterima di Technorati, sekarang setelah domain co.cc didepak saya kembalikan blog ini ke blogspot, jadi Technoratinya juga ikut ilang.

Ngomong-ngomong apa Anda sudah mengenal tentang Technorati ? Bagi yang belum mengenalnya, saya akan kasih penjelasan singkat tentang Technorati, Technorati adalah sebuah direktori terbesar saat ini dan memiliki fasilitas/fungsi yang cukup besar yaitu sebagai BlogSearch, Tags Aggregator dan Online Bookmarks. Dengan mendaftar di Technorati, akan meningkatkan traffic pengunjung ke blog kita, dan blog/website yang kita kelola lebih dapat dikenal oleh blogger lain, dan ini pun bisa disebut sebagai salah satu strategi SEO untuk blog/website kita.

Dengan mendaftarkan blog kita di Technorati, kita juga bisa mengetahui situs atau blog mana saja yang memasang link ke blog kita. Untuk mempersingkat waktu, ikuti langkah-langkah di bawah ini untuk mendaftar di Technorati :
  • Masuklah ke alamat Technorati.com
  • lalu Klik menu Join (seperti gambar dibawah ini :
3S6YXY4VKCDR
  • Isilah data secara lengkap lalu klik join
  • Setelah itu, akan muncul sebuah confirmation code. Lalu cek email anda yang telah didaftarkan di technorati tadi, lalu klik link yang telah diberikan melalui email anda.
  • Setelah itu masukan url blog Anda (seperti gambar dibawah ini), dan kemudian klik Begin Claim.
3S6YXY4VKCDR
  • Setelah itu, Anda tinggal menunggu Proses Claim, dan lakukan Complete Claim seperti gambar dibawah ini :
  • Anda akan dihadapkan pada Form seperti ini :
3S6YXY4VKCDR
  • Salin kode berikut dan publikasikannya dalam sebuah posting di blog Anda. Technorati harus dapat menemukan kode klaim dalam blog Anda via feed (RSS atau Atom). Caranya adalah dengan menerbitkan posting baru dan menyisipkan kode klaim di dalamnya.
  • Untuk Kode Klaim Blog/Website ini adalah : 3S6YXY4VKCDR
  • Dan sesudah itu, Anda tinggal klik Complete Claim
  • Berikutnya, Anda tinggal menunggu Kode Klaim yang sudah di masukkan dalam Postingan Anda di periksa oleh Technorati, untuk memastikan bahwa memang benar alamat URL yang diberikan, benar-benar milik Anda.
  • Dan yang terakhir (karena blog inipun belum terdaftar di Technorati), anda buat satu link dengan kode seperti dibawah ini, dan tampilkan di blog anda.
<a href=”http://technorati.com/faves?sub=addfavbtn&add=http://url blog anda”><img alt=”3S6YXY4VKCDR” src=”http://static.technorati.com/pix/fave/btn-fave2.png”/></a>
”3S6YXY4VKCDR”
  • Gantilah kode url blog anda diatas dengan kode URL anda.
Itu tadi sedikit informasi mengenai Cara Mendaftar di Technorati, semoga bermanfaat bagi Anda semua. Terimakasih.
Description: Cara Daftar di Technorati Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Daftar di Technorati

Masalah Threaded Comment Pada Template Blogger Lama

Berawal dari pertanyaan teman blogger dari Malaysia Haz Issac tentang Threaded Comments yang ada pada salah satu template buatan saya (Mas paper), yang menanyakan bagaimana caranya agar Threaded Comments pada template bisa berfungsi? Setelah mengganti beberapa kode script yang ada, tampilan komentar sudah ada fungsi reply dan delete, tapi permasalahan yang terjadi kemudian fitur reply tidak berfungsi normal, atau ketika diklik hanya ada tulisan javascript pada bagian bawah browser.

threaded comments

Terus terang kebanyakan dari template yang saya buat masih menggunakan fitur blogger lama, sehingga secara default belum dilengkapi fungsi reply atau Threaded Comments yang sudah dikembangkan oleh Blogger baru-baru ini. Kali ini saya akan mencoba memberikan satu tutorial bagi para pengguna template blogger lama (bukan klasik), bagaimana cara mengatasi permasalahan Threaded Comment khususnya bagi mereka yang sudah mengganti kode dengan menambahkan Threaded Comments tapi fitur reply tidak berfungsi normal.

Langkah Pertama

Cara atau metode pertama ini harus Anda lakukan agar Threaded Coments pada blog Anda berfungsi.
  1. Login ke blogger dengan akun Anda
  2. Pada dashboard pilih blog yang akan diberikan Threaded Comments (blogger new interface)
  3. Setelah itu masuk ke Settings >> Posts and Comments
  4. Kemudian pilih Comment Location setting pada posisi Embedded.
  5. Kembali lagi ke Setting, kali ini klik Other, pada Allow blog post pada baris pertama pilih posisi Full.
  6. Terakhir Save, kemudian lihat hasilnya apakah Threaded Comments sudah ada pada blog Anda. Jika belum ikuti langkah kedua di bawah ini.
Langkah Kedua
  1. Masuk ke Template kemudian pilih Edit HTML.
  2. Jangan lupa untuk centang Expand Widget Templates. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, lebih baik backup dulu template Anda.
  3. Kemudian cari kode di bawah ini :
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:include data='post' name='comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='comments'/>
    </b:if>
  4. Setelah ketemu ganti dengan kode berikut :
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
  5. Terakhir Save template, lihat dulu hasilnya.
Biasanya setelah Anda melakukan langkah kedua ini, Threaded Comments sudah ada pada blog Anda, tapi harus dicek satu persatu fungsinya. Permasalahan yang sering muncul adalah banyak sekali template yang masih menggunakan script blogger classic sehingga fitur reply (balas) tidak berfungsi normal. Jika fungsi Reply tidak berjalan, ikuti langkah ketiga berikut ini :

Langkah Ketiga

Langkah ini hanya dilakukan jika fungsi Reply tidak berjalan atau biasanya hanya keluar tulisan javascript pada browser bawah. Jika pada langkah kedua Threaded Comments sudah berfungsi normal langkah ini tinggalkan saja.
  1. Masih pada posisi Edit HTML (centang Expand Widget Templates), cari kode di bawah ini :
    <script type='text/javascript'>
    (function() {
    var items = <data:post.commentJso/>;
    var msgs = <data:post.commentMsgs/>;
    var postId = &#39;<data:post.id/>&#39;;
    var feed = &#39;<data:post.commentFeed/>&#39;;
    var authorName = &#39;<data:post.author/>&#39;;
    var authorUrl = &#39;<data:post.authorUrl/>&#39;;
    var blogId = &#39;<data:top.id/>&#39;;
    var baseUri = &#39;<data:post.commentBase/>&#39;;

    // <![CDATA[
    feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
    var cursor = null;
    if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
    }

    var bodyFromEntry = function(entry) {
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
    return '<span class="deleted-comment">' + entry.content.$t + '</span>';
    }
    }
    }
    return entry.content.$t;
    }

    var parse = function(data) {
    cursor = null;
    var comments = [];
    if (data && data.feed && data.feed.entry) {
    for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
    var comment = {};
    // comment ID, parsed out of the original id format
    var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
    comment.id = id ? id[2] : null;
    comment.body = bodyFromEntry(entry);
    comment.timestamp = Date.parse(entry.published.$t) + '';
    if (entry.author && entry.author.constructor === Array) {
    var auth = entry.author[0];
    if (auth) {
    comment.author = {
    name: (auth.name ? auth.name.$t : undefined),
    profileUrl: (auth.uri ? auth.uri.$t : undefined),
    avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
    };
    }
    }
    if (entry.link) {
    if (entry.link[2]) {
    comment.link = comment.permalink = entry.link[2].href;
    }
    if (entry.link[3]) {
    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
    if (pid && pid[1]) {
    comment.parentId = pid[1];
    }
    }
    }
    comment.deleteclass = 'item-control blog-admin';
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
    comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
    }
    }
    }
    comments.push(comment);
    }
    }
    return comments;
    };

    var paginator = function(callback) {
    if (hasMore()) {
    var url = feed;
    if (cursor) {
    url += '&published-min=' + new Date(cursor).toISOString();
    }
    window.bloggercomments = function(data) {
    var parsed = parse(data);
    cursor = parsed.length < 50 ? null
    : parseInt(parsed[parsed.length - 1].timestamp) + 1
    callback(parsed);
    window.bloggercomments = null;
    }
    url += '&callback=bloggercomments';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    };
    var hasMore = function() {
    return !!cursor;
    };
    var getMeta = function(key, comment) {
    if ('iswriter' == key) {
    var matches = !!comment.author
    && comment.author.name == authorName
    && comment.author.profileUrl == authorUrl;
    return matches ? 'true' : '';
    } else if ('deletelink' == key) {
    return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
    } else if ('deleteclass' == key) {
    return comment.deleteclass;
    }
    return '';
    };

    var replybox = null;
    var replyUrlParts = null;
    var replyParent = undefined;

    var onReply = function(commentId, domId) {
    if (replybox == null) {
    // lazily cache replybox, and adjust to suit this style:
    replybox = document.getElementById('comment-editor');
    if (replybox != null) {
    replybox.height = '250px';
    replybox.style.display = 'block';
    replyUrlParts = replybox.src.split('#');
    }
    }
    if (replybox && (commentId !== replyParent)) {
    document.getElementById(domId).insertBefore(replybox, null);
    replybox.src = replyUrlParts[0]
    + (commentId ? '&parentID=' + commentId : '')
    + '#' + replyUrlParts[1];
    replyParent = commentId;
    }
    };

    var tok = 'comment-form_';
    var hash = window.location.hash || '';
    var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

    // Configure commenting API:
    var configJso = {
    'maxDepth': 2
    };
    var provider = {
    'id': postId,
    'data': items,
    'loadNext': paginator,
    'hasMore': hasMore,
    'getMeta': getMeta,
    'onReply': onReply,
    'rendered': true,
    'initReplyThread': startThread,
    'config': configJso,
    'messages': msgs
    };

    var render = function() {
    if (window.goog && window.goog.comments) {
    var holder = document.getElementById('comment-holder');
    window.goog.comments.render(holder, provider);
    }
    };

    // render now, or queue to render when library loads:
    if (window.goog && window.goog.comments) {
    render();
    } else {
    window.goog = window.goog || {};
    window.goog.comments = window.goog.comments || {};
    window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
    window.goog.comments.loadQueue.push(render);
    }
    })();
    // ]]>
    </script>
  2. Setelah ketemu ganti dengan kode berikut :
    <script type='text/javascript'>
    (function() {
    var items = <data:post.commentJso/>;
    var msgs = <data:post.commentMsgs/>;
    var config = <data:post.commentConfig/>;

    // <![CDATA[
    var cursor = null;
    if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
    }

    var bodyFromEntry = function(entry) {
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
    return '<span class="deleted-comment">' + entry.content.$t + '</span>';
    }
    }
    }
    return entry.content.$t;
    }

    var parse = function(data) {
    cursor = null;
    var comments = [];
    if (data && data.feed && data.feed.entry) {
    for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
    var comment = {};
    // comment ID, parsed out of the original id format
    var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
    comment.id = id ? id[2] : null;
    comment.body = bodyFromEntry(entry);
    comment.timestamp = Date.parse(entry.published.$t) + '';
    if (entry.author && entry.author.constructor === Array) {
    var auth = entry.author[0];
    if (auth) {
    comment.author = {
    name: (auth.name ? auth.name.$t : undefined),
    profileUrl: (auth.uri ? auth.uri.$t : undefined),
    avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
    };
    }
    }
    if (entry.link) {
    if (entry.link[2]) {
    comment.link = comment.permalink = entry.link[2].href;
    }
    if (entry.link[3]) {
    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
    if (pid && pid[1]) {
    comment.parentId = pid[1];
    }
    }
    }
    comment.deleteclass = 'item-control blog-admin';
    if (entry.gd$extendedProperty) {
    for (var k in entry.gd$extendedProperty) {
    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
    comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
    }
    }
    }
    comments.push(comment);
    }
    }
    return comments;
    };

    var paginator = function(callback) {
    if (hasMore()) {
    var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
    if (cursor) {
    url += '&published-min=' + new Date(cursor).toISOString();
    }
    window.bloggercomments = function(data) {
    var parsed = parse(data);
    cursor = parsed.length < 50 ? null
    : parseInt(parsed[parsed.length - 1].timestamp) + 1
    callback(parsed);
    window.bloggercomments = null;
    }
    url += '&callback=bloggercomments';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    };
    var hasMore = function() {
    return !!cursor;
    };
    var getMeta = function(key, comment) {
    if ('iswriter' == key) {
    var matches = !!comment.author
    && comment.author.name == config.authorName
    && comment.author.profileUrl == config.authorUrl;
    return matches ? 'true' : '';
    } else if ('deletelink' == key) {
    return config.baseUri + '/delete-comment.g?blogID='
    + config.blogId + '&postID=' + comment.id;
    } else if ('deleteclass' == key) {
    return comment.deleteclass;
    }
    return '';
    };

    var replybox = null;
    var replyUrlParts = null;
    var replyParent = undefined;

    var onReply = function(commentId, domId) {
    if (replybox == null) {
    // lazily cache replybox, and adjust to suit this style:
    replybox = document.getElementById('comment-editor');
    if (replybox != null) {
    replybox.height = '250px';
    replybox.style.display = 'block';
    replyUrlParts = replybox.src.split('#');
    }
    }
    if (replybox && (commentId !== replyParent)) {
    document.getElementById(domId).insertBefore(replybox, null);
    replybox.src = replyUrlParts[0]
    + (commentId ? '&parentID=' + commentId : '')
    + '#' + replyUrlParts[1];
    replyParent = commentId;
    }
    };

    var hash = (window.location.hash || '#').substring(1);
    var startThread, targetComment;
    if (/^comment-form_/.test(hash)) {
    startThread = hash.substring('comment-form_'.length);
    } else if (/^c[0-9]+$/.test(hash)) {
    targetComment = hash.substring(1);
    }

    // Configure commenting API:
    var configJso = {
    'maxDepth': config.maxThreadDepth
    };
    var provider = {
    'id': config.postId,
    'data': items,
    'loadNext': paginator,
    'hasMore': hasMore,
    'getMeta': getMeta,
    'onReply': onReply,
    'rendered': true,
    'initComment': targetComment,
    'initReplyThread': startThread,
    'config': configJso,
    'messages': msgs
    };

    var render = function() {
    if (window.goog && window.goog.comments) {
    var holder = document.getElementById('comment-holder');
    window.goog.comments.render(holder, provider);
    }
    };

    // render now, or queue to render when library loads:
    if (window.goog && window.goog.comments) {
    render();
    } else {
    window.goog = window.goog || {};
    window.goog.comments = window.goog.comments || {};
    window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
    window.goog.comments.loadQueue.push(render);
    }
    })();
    // ]]>
    </script>
  3. Setelah itu save templates.
Langkah ketiga ini dibuat oleh http://modification-blog.blogspot.com. Setelah Anda melakukan langkah ini fungsi Reply bisa berjalan normal, tapi permasalahan yang saya dapat kemudian (setelah Anda melakukan langkah ini) jika Anda masih memakai browser internet lama terkadang akan susah untuk membuka postingan yang ada pada blog.

Threaded Comment di blog Anda sekarang sudah ada, sekarang anda tinggal modifikasi sendiri bentuk dari kotak komentar. Jika Anda menginginkan kotak komentar Admin berbeda, ikuti langkah sederhana berikut ini (contohnya seperti gambar diatas) :
  1. Pada posisi Edit HTML letakkan kode berikut ini persis diatas kode </body> :
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    $(function() {
    function highlight(){
    $('.user.blog-author,.ssyby').closest('.comment-block')
    .css('border', '1px solid #e1e1e1')
    .css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9gQXDzmTXVIpohUKgOjGyozOTWpJKaNQ2k-kbeYABx7BEvcY85xnBoVyQEn9fmtmnR5rUO_88XDJ7QLv65OaYDR2NOlNLXZABZz-Pq3vMer3rHuhCLy17_WJW1LT0mr7qcXV0zKRcJ0/s1600/admin2.png") no-repeat bottom right')
    .css('padding', '10px');
    }
    $(document).bind('ready scroll click', highlight);
    });
    </script>
  2. Kemudian save templates.
Demikian tadi tutorial singkat untuk mengatasi masalah yang sering muncul dalam membuat Threaded Comments pada template blogger classic. Jika masih ada yang kurang jelas silahkan tinggalkan komentar Anda di bawah. Selamat mencoba dan semoga bermanfaat.
Description: Masalah Threaded Comment Pada Template Blogger Lama Rating: 4.5 Reviewer: Unknown - ItemReviewed: Masalah Threaded Comment Pada Template Blogger Lama

Minggu, 25 Maret 2012

Dua Template Gratis Untuk Pecinta Music dan Game

Di malam yang dingin ini saya akan kembali berbagi kepada teman-teman blogger semua, dua buah template warna hitam gratis. Template pertama saya namakan Johny Darkmusic dibuat khusus untuk teman blogger yang mempunyai blog konten musik atau selebritis. Dan template kedua Johny Darkgamer 2 sesuai namanya template ini cocok untuk blog yang mempunyai konten game atau sejenisnya.

Kedua template ini saya lengkapi dengan fitur slider carousel otomatis, anda tinggal memasukkan kode script yang sudah saya siapkan di bawah pada kotak HMTL/Javascript. Slider carousel yang saya gunakan disini adalah Tiny Carousel dari Maarten Baijs yang sudah dimodifikasi oleh seorang master blogger Indonesia Taufik Nurrohman, sehingga kita tidak perlu lagi memasukkan keterangan dan URL slider satu persatu. Baiklah, langsung saja karena saya juga sudah ngantuk berat, berikut ini kedua template tersebut :

Johny Darkmusic

johny darkmusic


Template ini saya buat bagi Anda yang suka dengan konten music atau selebritis. Template ini bertipe magazine, terdapat 3/4 kolom sidebar. Fitur-fitur yang terdapat pada template ini antara lain :
  1. Slider Carousel
    Untuk mengganti slider anda hanya perlu memasukkan kode di bawah ini pada kotak HTML/Javascript. Di dashboard masuk ke layout kemudian pilih kolom kosong di bawah header >> add gadget >> HTML/Javascript :
    <script type="text/javascript">
        showPostDate_g  = false;
        showComm_g      = false;
        slideOpenNewTab = true;
        idMode          = true;
        slidebyLabels   = false;
    var slideLabelName  = "label",
        pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwyNZtH2LbOEiQKG9aRcpwyWiUxnEyigQF6efjPdU7JRt1hJ7fSomVC6QUcuXYTYjFtniU2zqsdkXv8Uv5E0un6dk1pMSKw0FVTMoOEtXXCl7hBmCgHESlMwF2ZycbzS8qNwIDdWqjdE/s1600/no+image.jpg",
        text            = "comment",
        numposts_g      = 12,
        numchars_g      = 0,
        showText        = "Show at",
        postText        = "Posts",
        tinyprevNav     = "&lt;",
        tinynextNav     = "&gt;",
        home_page       = "http://johnydarkmusic.blogspot.com/";
    </script>
    <script src="https://masolis-javascript.googlecode.com/svn/trunk/tinycarousel-hompimpa.js" type="text/javascript"></script>
    Ganti URL warna biru diatas dengan URL blog Anda, kemudian save.
  2. Kategory dengan thumbnail (Category with thumbnail)
    Letaknya di sidebar tengah (satu thumbnail), cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
    <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/jazz?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 0; i < json.feed.entry.length; i++)
     {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
     document.write(item);
     }
     document.write('</ul>');
     }
    </script>
    <script src="http://johnydarkmusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johnydarkmusic.blogspot.com/search/label/jazz" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Keterangan :
    Warna biru (jazz) : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
    Warna merah : Ganti URL dengan URL blog anda.
  3. Latest Post
    Untuk mengatur latest post yang ada di homepage caranya adalah, di dashboard blogger pilih setting, kemudian klik posts and comments. Pada bagian paling atas (Show at most) pilih berapa posts yang ingin ditampilkan pada homepage. Kemudian masuk ke Language and formatting, agar blog Anda seperti pada demo template ini pada Timestamp format pilih hanya jam/waktu (00:00).
  4. Kotak feedburner di bawah postingan
    Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
    <div class='subscribe'>
    <p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
    <b>click here</b></a>, or subscribe to receive more great content just like it.</p>
    <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='JohnyTemplate'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
    <input id='botsubbutton' type='submit' value='Submit'/><br/>
    <small>Your information will not be shared. Ever.</small>
    </form>
    </div>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
    Warna merah : ganti dengan URL anda.
    Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.
  5. Headline News (Di bawah navigasi menu atas atau news ticker)
    Untuk menggantinya di dashboard pilih template kemudian klik Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F URL http://johnydarkmusic.blogspot.com ganti dengan blog URL anda.
Johny Darkgamer 2

johny darkgamer 2


Sesuai namanya template ini adalah versi kedua dari serial template Johny Darkgamer.  Dengan warna dasar hitam dan hijau pada bagian navigasi menu, template ini sangat cocok untuk konten game. Fitur-fitur yang terdapat pada template ini hampir sama dengan template Johny Darkmusic, malah lebih sederhana pada hompage hanya terdapat 3 kolom sidebar yang tidak terlalu sulit untuk memasang widget yang ada disitu. Cara memasang slider pada template ini sama dengan template Johny Darkmusic, anda tinggal memasukkan kode script pada langkah nomer satu ke kotak HTML/Javascript. Demikian juga dengan kotak Feedburner yang ada di bawah postingan cara untuk menggantinya sama pada langkah nomer 4.

Kedua template ini support dengan halaman statis (static page) klik sample page yang terdapat pada navigasi menu atas. Dan juga template ini sudah dilengkapi dengan fitur threaded comment dengan fungsi reply bawaan dari blogger, anda bisa modifikasi sesuai keinginan. Kekurangan template ini belum ada fitur kotak pencari (search box), saya yakin Anda semua pasti bisa untuk menambahkan kotak pencari pada kedua template ini terserah mau memakai bawaan dari blogger atau memodifikasi sendiri.

Tutorial untuk pemasangan fitur-fitur yang ada pada kedua template diatas saya asumsikan Anda memakai blogger new interface bagi yang masih memakai old interface saya kira juga gampang dan mudah dimengerti, sampai disini dulu mas/mbak sudah larut malam selamat mencoba dan semoga bermanfaat.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Darkgamer 2
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Johny Darkmusic
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript Description: Dua Template Gratis Untuk Pecinta Music dan Game Rating: 4.5 Reviewer: Unknown - ItemReviewed: Dua Template Gratis Untuk Pecinta Music dan Game

Entertainment

Technology

Random Posts

Sport

News World

 


Backlinks Here

Backlinks to my website? ping fast  my blog, website, or RSS feed for Free Tips dan Trik Sukses Bisnis OnlineindotradingUAW BMKGNTTfree indotradingcms | indotradingsakpa
Search Engine
www.e-referrer.com